trooui

Base

@radix-ui lib's components are used as base cuz it provides rich accessibility and all the other SEO related attributes easily for all of it's components, which rapids the development of a design system.

Styles

tailwindcss is used for css as it's easy to write classnames rather than whole css, later if we want to switch to vanilla css or css-in-js, we can do that easily as all of our components are modular, we can do that one-by-one.

Config

rollup is used to bundle our components into a final package which can be used by all the other applications.

Types

typescript is used to provide type-safety everywhere. we can later use flow to save ts-overhead.

Dependencies

tailwindcss for tailwindcss \
postcss for building css \
autoprefixer for css compatibility across different browsers \
react for react code \
react-dom for react code \
lucide-react for icons. \
if ya don' wanna use this icons package then remove this lib from peerDeps in package.json and add it to devDeps

Installation

For bun users
``
bun add trooui tailwindcss postcss autoprefixer
`
For npm users
`
npm i trooui tailwindcss postcss autoprefixer
`
For yarn users
`
yarn add trooui tailwindcss postcss autoprefixer
`
For pnpm users
`
pnpm add trooui tailwindcss postcss autoprefixer
`

Usage

Ya need to first generate tailwindcss config and for that ya can use this command:
`
bunx tailwindcss init -p
`

then ya need to import trooui's css in your index.css or any global css file
index.css should look like this
`
@import "trooui/styles"
`

and in tailwind.config.js use trooui's tailwindPlugin
`
import trooui from 'trooui/styles'

export default {
content: [
"node_modules/trooui/dist/*/.js", //this's needed cuz i'm not including the generated css in the package
"src/*/.jsx", //your project files which uses tailwindcss
"index.html" //your project's starting point
],
plugins: [trooui] //use of this plugin attaches the base styles of trooui to tailwind to be consumed by the project.
}
``