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.
}