The small, own-your-code React design system

29 accessible components. CSS Modules — no Tailwind, no runtime styling. Two install modes: npm install for library users, and a CLI that copies source into your project (like shadcn/ui).

Browse components → Star on GitHub

Two ways to install

1. Library mode

Ship it as a dependency. Small (~23 KB gz JS), no config.

npm install @dixant/tatva-ui

// App.tsx
import { Button, ThemeProvider } from '@dixant/tatva-ui';
import '@dixant/tatva-ui/style.css';

<ThemeProvider>
  <Button>Hello</Button>
</ThemeProvider>

2. CLI mode (own your code)

Copy component source into your project. Edit anything.

npx @dixant/tatva-ui init
npx @dixant/tatva-ui add button input select

# Source appears at components/tatva/*
# Edit, customize, commit. It's your code now.

How it compares

Feature	Tatva	shadcn/ui	MUI
Copy-paste CLI	yes	yes	no
npm library	yes	no	yes
Styling	CSS Modules	Tailwind	Emotion
Runtime styling cost	0	0	~30 KB gz
Tailwind required	no	yes	no
Bundle (JS gz)	~23 KB	—	~90 KB+
Prebuilt blocks	yes	yes	partial
Component count	29	~50	~200
Dark mode	built-in	yes	yes

What's inside

Button · Input · Textarea · Checkbox · Radio · Select · Toggle · Typography · Icon · Stack · Card · Divider · Tabs · Breadcrumb · Pagination · Modal · Toast · Tooltip · Alert · Spinner · Skeleton · DataTable · Badge · Avatar · Accordion · EmptyState · FormField · SearchInput · MultiSelect

+ Prebuilt Blocks: Login · Pricing · Dashboard