d12-ui is a lightweight, reusable, and themeable React component library built using TypeScript. It provides accessible and consistent components such as Button, Badge, Accordion, and TextInput to accelerate front-end development.
Built with React, TypeScript, and CSS. Published on npm.
- Prebuilt components:
Button,Badge,Accordion,TextInput,Card,Dialog - Light and dark theme support using CSS variables
- Minimal styling with full customization flexibility
- Tree-shakable and fully typed (TypeScript support)
- ESM-compatible module for modern web apps
- Optional unit testing support with Jest and React Testing Library
npm install d12-uior
yarn add d12-uiimport { Button, Badge, Accordion, TextInput } from 'd12-ui';
function App() {
return (
<div>
<Button onClick={() => alert('Clicked')}>Click Me</Button>
<Badge color="success">Active</Badge>
<Accordion title="More Info">
This is the content inside the accordion.
</Accordion>
<TextInput placeholder="Enter your name" />
</div>
);
}All components are customizable through props.
d12-ui supports light and dark themes using CSS variables. You can toggle the theme by setting a data-theme attribute on your HTML or root element:
<body data-theme="dark">
<!-- or -->
<body data-theme="light">To customize colors or variables, override the default CSS variables in your global stylesheet.
Each component can be tested using Jest and React Testing Library. To run tests:
npm testTo preview components in isolation using Storybook:
npm run storybookThis allows for interactive component development and documentation.
Contributions are welcome. To contribute:
- Fork the repository
- Create a new branch (
git checkout -b feature/ComponentX) - Commit your changes (
git commit -am 'Add ComponentX') - Push to your branch (
git push origin feature/ComponentX) - Open a Pull Request