https://github.com/patrickap/twin-ui
Accessible react component library written in typescript ✌️.
https://github.com/patrickap/twin-ui
accessible component interface layout library react typescript ui
Last synced: 4 months ago
JSON representation
Accessible react component library written in typescript ✌️.
- Host: GitHub
- URL: https://github.com/patrickap/twin-ui
- Owner: patrickap
- License: mit
- Created: 2023-02-09T23:11:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-11-20T19:39:24.000Z (7 months ago)
- Last Synced: 2025-12-31T03:03:31.483Z (6 months ago)
- Topics: accessible, component, interface, layout, library, react, typescript, ui
- Language: TypeScript
- Homepage:
- Size: 7.05 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# twin-ui
Accessible React components for creating beautiful UIs. Built with Tailwind CSS, Radix UI, TypeScript, and React, this library provides simple, lightweight and easy-to-use components for building stunning UIs that are both beautiful and accessible.
Furthermore, it comes with pre-configured animations and offers pre-designed components, layouts, and pages, making it an ideal choice for getting your project up and running quickly.
## Images
## Installation
To use `twin-ui`, install the package via npm.
```bash
npm install twin-ui
# or install a specific version
npm install twin-ui@x.x.x
```
Import the styles in your `index.css`.
```css
@import "twin-ui";
```
## Examples
**Button**
```jsx
import { Button } from 'twin-ui';
const Component = () => (
{...}}>
Click
);
```
**Dialog**
```jsx
import { Dialogs, useDialog } from 'twin-ui';
const Component = () => {
const dialog = useDialog();
return (
dialog.open({...}))}>
Click
);
};
const App = () => {
return (
<>
>
);
}
```
**Center Layout**
```jsx
import { CenterLayout } from 'twin-ui';
const Component = () => (
Centered
);
```
## Customization
This component library is built with Tailwind CSS and supports full customization through CSS variables. You can override theme values globally using either the Tailwind specific `@theme` directive or the CSS `:root` selector in your `index.css`.
**Note**: [Theme variables](https://tailwindcss.com/docs/theme) aren't just CSS variables — they also instruct Tailwind to create new utility classes that you can use in your HTML.
```css
/* Using the @theme directive */
@theme {
--color-primary-50: #eef2ff;
--color-primary-100: #e0e7ff;
--color-primary-200: #c7d2fe;
--color-primary-300: #a5b4fc;
--color-primary-400: #818cf8;
--color-primary-500: #6366f1;
--color-primary-600: #4f46e5;
--color-primary-700: #4338ca;
--color-primary-800: #3730a3;
--color-primary-900: #312e81;
--color-primary-950: #1e1b4b;
}
/* Or via the :root pseudo-class */
:root {
--color-primary-50: #eef2ff;
--color-primary-100: #e0e7ff;
--color-primary-200: #c7d2fe;
--color-primary-300: #a5b4fc;
--color-primary-400: #818cf8;
--color-primary-500: #6366f1;
--color-primary-600: #4f46e5;
--color-primary-700: #4338ca;
--color-primary-800: #3730a3;
--color-primary-900: #312e81;
--color-primary-950: #1e1b4b;
}
```