A production-ready React UI component library built with TypeScript, Tailwind CSS, and Vite. Designed for enterprise applications with accessibility, theming, and full TypeScript support.
- ✨ Modern Stack: Built with React 18+, TypeScript, and Vite
- 🎨 Tailwind CSS: Utility-first styling with theme customization
- 🌓 Dark Mode: Built-in dark/light theme support
- ♿ Accessible: ARIA attributes and keyboard navigation
- 📦 Tree-shakeable: Optimized bundle size with ES modules
- 🔒 Type-safe: Full TypeScript support with exported types
- 📖 Storybook: Interactive component documentation
- ✅ Tested: Comprehensive test coverage with Vitest
- 🚀 CI/CD: Automated testing and publishing
- React (
^19.2.0): The library for web and native user interfaces. - TypeScript (
~5.7.0): Strongly typed programming language that builds on JavaScript.
- Vite (
^6.0.0): Next Generation Frontend Tooling. - Tailwind CSS (
^3.4.17): A utility-first CSS framework for rapidly building modern websites. - PostCSS (
^8.4.49): A tool for transforming CSS with JavaScript. - clsx (
^2.1.1) & tailwind-merge (^3.4.0): Utilities for constructing className strings conditionally and merging Tailwind classes without conflicts.
- Storybook (
^10.2.8): Frontend workshop for building UI components and pages in isolation.
- Vitest (
^4.0.18): Blazing Fast Unit Test Framework. - Testing Library: Simple and complete testing utilities that encourage good testing practices.
- ESLint (
^9.39.1): Statically analyzes your code to quickly find problems. - Prettier (
^3.8.1): An opinionated code formatter. - Husky (
^9.1.7): Modern native git hooks made easy.
npm install @your-org/ui-libraryyarn add @your-org/ui-librarypnpm add @your-org/ui-libraryimport { Button, Input, Modal } from "@your-org/ui-library";
import "@your-org/ui-library/styles.css";
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<Button variant="primary" onClick={() => setIsOpen(true)}>
Open Modal
</Button>
<Input label="Email" type="email" placeholder="your.email@example.com" />
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Welcome">
<p>Hello from the modal!</p>
</Modal>
</div>
);
}Versatile button component with multiple variants and sizes.
import { Button } from "@your-org/ui-library";
<Button variant="primary" size="md">
Click me
</Button>;Variants: primary, secondary, outline, ghost, danger
Sizes: sm, md, lg
Form input component with label, error, and helper text support.
import { Input } from "@your-org/ui-library";
<Input
label="Username"
placeholder="Enter username"
error="Username is required"
/>;Accessible modal dialog with portal rendering and keyboard support.
import { Modal } from "@your-org/ui-library";
<Modal isOpen={true} onClose={() => {}} title="Confirmation" size="md">
<p>Modal content here</p>
</Modal>;The library supports custom theming through CSS variables. See THEMING.md for detailed customization options.
:root {
--color-primary-500: #your-color;
--color-secondary-500: #your-color;
}Enable dark mode by adding the dark class to your root element:
<html className="dark">{/* Your app */}</html>All components are fully typed with exported interfaces:
import type { ButtonProps, InputProps, ModalProps } from "@your-org/ui-library";# Install dependencies
npm install
# Run Storybook
npm run storybook
# Run tests
npm test
# Run tests with coverage
npm run test:coverage
# Build library
npm run build
# Lint code
npm run lint
# Type check
npm run typecheck- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
MIT © Your Organization
Contributions are welcome! Please read our Contributing Guidelines before submitting a pull request.
See CHANGELOG.md for release history.