# substance-react

> Substance React is a new component library for NextJS and React. The purpose of this library is to offer functional components that are based on popular primitives like Radix-UI and Flowbite. This library allows you to define your own Tailwind styles and

Latest version **0.0.6** (published 2023-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install substance-react
pnpm add substance-react
yarn add substance-react
bun add substance-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2023-04-25 |
| First published | 2023-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 132.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Kyle Roach |
| Maintainers | kroach.2023 |
| Keywords | react, nextjs, design-system, tailwind, tailwindcss, Component Library, UI Component Library, NextJS Component Library, React Component Library |

## Links

- npm: https://www.npmjs.com/package/substance-react
- Repository: https://github.com/ktroach/substance-react
- Homepage: https://ktroach.github.io/substance-react/
- Issues: https://github.com/ktroach/substance-react/issues
- npm.io page: https://npm.io/package/substance-react

## Dependencies (9)

- [clsx](https://npm.io/package/clsx.md) 1.1.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [react-icons](https://npm.io/package/react-icons.md) ^4.3.1
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.2
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) 1.12.0
- [@heroicons/react](https://npm.io/package/@heroicons/react.md) ^1.0.6
- [mini-svg-data-uri](https://npm.io/package/mini-svg-data-uri.md) ^1.4.4
- [@radix-ui/react-icons](https://npm.io/package/@radix-ui/react-icons.md) 1.3.0
- [@radix-ui/react-accordion](https://npm.io/package/@radix-ui/react-accordion.md) 1.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.6 (latest) — 2023-04-25
- 0.0.5 — 2023-04-20
- 0.0.4 — 2023-04-12
- 0.0.3 — 2023-04-05
- 0.0.2 — 2023-03-26
- 0.0.1 — 2023-03-25

## README

# substance-react 

Substance React is a new component library for NextJS and React. The purpose of this library is to offer functional components that are based on popular primitives like Radix-UI and Flowbite. This library allows you to define your own Tailwind styles and apply them to the components. It comes with a default set of styles that are influenced by Shadcn-ui, Radix, Flowbite and from a custom design system. The styles can be easily overriden and custom themes can be defined in the tailwind config to apply your own styles or translated from your design system.  The goal of this library is consolidate all of the good parts of Radix, ShadCN, and Flowbite into one consolidated set of components that can save a developer tons of time. 

Best of all this library is completely free to use in your NextJS and React projects. It also includes a documentation demo page with React examples. 

Substance React was built with React, Tailwind CSS, Radix-UI, Flowbite, Storybook, and more!

# Getting Started

Install substance-react as a dependency into your React or Next app:

`npm i substance-react@latest -E`

Include the Subtance plugin in your Tailwind plugins and include the path to the node package in your Tailwind Config:

```
module.exports = {
    content: [
        './src/**/*.{js,jsx,ts,tsx}',
        'node_modules/substance-react/**/*.{js,jsx,ts,tsx}'
    ],
    theme: {
    extend: {},
    },
    plugins: [require('substance-react/lib/plugin')],
};
```

# Examples

---
_Source: https://npm.io/package/substance-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._