A React 19 UI component library for building dashboards. 30+ accessible components, dark mode theming, and AI building blocks. Built with TypeScript and CSS Modules — zero runtime CSS-in-JS.
npm: https://www.npmjs.com/package/@kamleshdev/prepui
- 30+ components — primitives, forms, navigation, overlays, dashboard widgets, and AI chat components
- Dark mode — built-in
ThemeProviderwithdata-themeattribute and semantic design tokens - Accessible — ARIA roles, keyboard navigation, focus management
- Tree-shakeable — ESM + CJS builds,
sideEffectsconfigured - TypeScript — full type definitions shipped in the package
- No CSS-in-JS — CSS Modules with a single token-driven stylesheet import
| Category | Components |
|---|---|
| Primitives | Button, Badge, Avatar, Spinner, Skeleton |
| Layout | Card, EmptyState |
| Form | Input, Select, Checkbox, Switch, Textarea, RadioGroup |
| Feedback | Alert, Progress, Toast |
| Navigation | Tabs, Breadcrumb, Pagination |
| Overlay | Modal, Tooltip, Dropdown |
| Dashboard | Sidebar, Navbar, StatCard, DataTable |
| Theming | ThemeProvider, useTheme |
| AI | ChatPanel, PromptInput, StreamingResponse, CitationCard, ResultsComparison, FeedbackWidget |
npm install @kamleshdev/prepuiPeer dependencies: react >= 19 and react-dom >= 19.
import { Button, Card, StatCard, ThemeProvider } from '@kamleshdev/prepui';
import '@kamleshdev/prepui/style.css';
function App() {
return (
<ThemeProvider defaultTheme="light">
<Card>
<Card.Header>Sales Overview</Card.Header>
<Card.Body>
<StatCard title="Revenue" value="$48,295" trend="up" trendValue="12.5%" />
<Button variant="primary">View report</Button>
</Card.Body>
</Card>
</ThemeProvider>
);
}Wrap your app in ThemeProvider and use the useTheme hook:
import { ThemeProvider, useTheme } from '@kamleshdev/prepui';
const { theme, toggleTheme } = useTheme();The theme is persisted to localStorage and applied via data-theme on <html>.
import { ToastProvider, useToast } from '@kamleshdev/prepui';
// Wrap your app:
<ToastProvider><App /></ToastProvider>
// Inside any component:
const { toast } = useToast();
toast({ title: 'Saved!', variant: 'success' });<DataTable
columns={columns}
data={rows}
pageSize={10}
selectable
striped
stickyHeader
/>npm install # install dependencies
npm run storybook # start Storybook at localhost:6006
npm run dev # start demo app
npm run build # build library to dist/
npm run lint # lint
npm test # run Storybook interaction tests- Push to
main/master— GitHub Actions builds and deploys Storybook automatically. - In your repo: Settings → Pages → Source → select GitHub Actions.
MIT