abit-ui
v1.0.15
Published
abit-ui design-system from scratch
Maintainers
abtin_monsefReadme
abit-UI Design System
A customizable, tree-shakable design system built with React, TypeScript, and Tailwind CSS.
Features
- � Built with TypeScript for type safety
- ⚡️ Tree-shaking support for optimized bundles
- 🎨 Theme provider for consistent styling
- 📦 Comprehensive component library
- 🖇 Utility hooks for common functionality
- ✨ Tailwind CSS for utility-first styling
Installation
npm install abit-ui
# or
yarn add abit-uiUsage
Theme Provider
Wrap your application with the ThemeProvider to enable theming:
import { ThemeProvider } from 'abit-ui';
function App() {
return <ThemeProvider>{/* Your application */}</ThemeProvider>;
}🧩 Using ThemeProvider in Next.js (App Router)
If you're using abit-ui in a Next.js App Router project, make sure to wrap ThemeProvider inside a Client Component. This is required because ThemeProvider uses React context and must run on the client.
✅ Step 1: Create a ThemeWrapper Client Component
Create a file like app/theme-wrapper.tsx:
// app/theme-wrapper.tsx
'use client';
import { ThemeProvider } from 'abit-ui'; // or import directly if not re-exported
export default function ThemeWrapper({
children,
}: {
children: React.ReactNode;
}) {
return <ThemeProvider>{children}</ThemeProvider>;
}✅ Step 2: Use ThemeWrapper in Your Root Layout
In your app/layout.tsx or app/[lang]/layout.tsx:
import ThemeWrapper from './theme-wrapper';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<ThemeWrapper>{children}</ThemeWrapper>
</body>
</html>
);
}Tailwind CSS Integration
To fully enable all utility classes (such as bg-danger, text-primary, animations, and CSS variable-based color theming) from abit-ui, you must extend your Tailwind config as shown below.
import type { Config } from 'tailwindcss';
const config: Config = {
darkMode: 'class',
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./src/**/*.{js,ts,jsx,tsx,mdx}',
// 👇 Required to include abit-ui utilities
'./node_modules/abit-ui/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
default: {
DEFAULT: 'rgba(var(--default-500), <alpha-value>)',
50: 'rgba(var(--default-50), <alpha-value>)',
100: 'rgba(var(--default-100), <alpha-value>)',
200: 'rgba(var(--default-200), <alpha-value>)',
300: 'rgba(var(--default-300), <alpha-value>)',
400: 'rgba(var(--default-400), <alpha-value>)',
500: 'rgba(var(--default-500), <alpha-value>)',
600: 'rgba(var(--default-600), <alpha-value>)',
700: 'rgba(var(--default-700), <alpha-value>)',
800: 'rgba(var(--default-800), <alpha-value>)',
900: 'rgba(var(--default-900), <alpha-value>)',
950: 'rgba(var(--default-950), <alpha-value>)',
},
primary: {
DEFAULT: 'rgba(var(--primary-500), <alpha-value>)',
50: 'rgba(var(--primary-50), <alpha-value>)',
100: 'rgba(var(--primary-100), <alpha-value>)',
200: 'rgba(var(--primary-200), <alpha-value>)',
300: 'rgba(var(--primary-300), <alpha-value>)',
400: 'rgba(var(--primary-400), <alpha-value>)',
500: 'rgba(var(--primary-500), <alpha-value>)',
600: 'rgba(var(--primary-600), <alpha-value>)',
700: 'rgba(var(--primary-700), <alpha-value>)',
800: 'rgba(var(--primary-800), <alpha-value>)',
900: 'rgba(var(--primary-900), <alpha-value>)',
950: 'rgba(var(--primary-950), <alpha-value>)',
},
secondary: {
DEFAULT: 'rgba(var(--secondary-500), <alpha-value>)',
50: 'rgba(var(--secondary-50), <alpha-value>)',
100: 'rgba(var(--secondary-100), <alpha-value>)',
200: 'rgba(var(--secondary-200), <alpha-value>)',
300: 'rgba(var(--secondary-300), <alpha-value>)',
400: 'rgba(var(--secondary-400), <alpha-value>)',
500: 'rgba(var(--secondary-500), <alpha-value>)',
600: 'rgba(var(--secondary-600), <alpha-value>)',
700: 'rgba(var(--secondary-700), <alpha-value>)',
800: 'rgba(var(--secondary-800), <alpha-value>)',
900: 'rgba(var(--secondary-900), <alpha-value>)',
950: 'rgba(var(--secondary-950), <alpha-value>)',
},
success: {
DEFAULT: 'rgba(var(--success-500), <alpha-value>)',
50: 'rgba(var(--success-50), <alpha-value>)',
100: 'rgba(var(--success-100), <alpha-value>)',
200: 'rgba(var(--success-200), <alpha-value>)',
300: 'rgba(var(--success-300), <alpha-value>)',
400: 'rgba(var(--success-400), <alpha-value>)',
500: 'rgba(var(--success-500), <alpha-value>)',
600: 'rgba(var(--success-600), <alpha-value>)',
700: 'rgba(var(--success-700), <alpha-value>)',
800: 'rgba(var(--success-800), <alpha-value>)',
900: 'rgba(var(--success-900), <alpha-value>)',
950: 'rgba(var(--success-950), <alpha-value>)',
},
warning: {
DEFAULT: 'rgba(var(--warning-500), <alpha-value>)',
50: 'rgba(var(--warning-50), <alpha-value>)',
100: 'rgba(var(--warning-100), <alpha-value>)',
200: 'rgba(var(--warning-200), <alpha-value>)',
300: 'rgba(var(--warning-300), <alpha-value>)',
400: 'rgba(var(--warning-400), <alpha-value>)',
500: 'rgba(var(--warning-500), <alpha-value>)',
600: 'rgba(var(--warning-600), <alpha-value>)',
700: 'rgba(var(--warning-700), <alpha-value>)',
800: 'rgba(var(--warning-800), <alpha-value>)',
900: 'rgba(var(--warning-900), <alpha-value>)',
950: 'rgba(var(--warning-950), <alpha-value>)',
},
danger: {
DEFAULT: 'rgba(var(--danger-500), <alpha-value>)',
50: 'rgba(var(--danger-50), <alpha-value>)',
100: 'rgba(var(--danger-100), <alpha-value>)',
200: 'rgba(var(--danger-200), <alpha-value>)',
300: 'rgba(var(--danger-300), <alpha-value>)',
400: 'rgba(var(--danger-400), <alpha-value>)',
500: 'rgba(var(--danger-500), <alpha-value>)',
600: 'rgba(var(--danger-600), <alpha-value>)',
700: 'rgba(var(--danger-700), <alpha-value>)',
800: 'rgba(var(--danger-800), <alpha-value>)',
900: 'rgba(var(--danger-900), <alpha-value>)',
950: 'rgba(var(--danger-950), <alpha-value>)',
},
},
animation: {
sway: 'sway 0.75s ease-in-out infinite',
blink: 'blink 1.4s infinite both',
ripple: 'ripple 600ms linear',
shimmer: 'shimmer 2s infinite',
},
keyframes: {
sway: {
'0%, 100%': { transform: 'translateY(-5px)' },
'50%': { transform: 'translateY(5px)' },
},
blink: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.2' },
},
ripple: {
'0%': {
transform: 'scale(0)',
opacity: '0.3',
},
'100%': {
transform: 'scale(4)',
opacity: '0',
},
},
shimmer: {
'100%': { transform: 'translateX(100%)' },
},
},
},
},
plugins: [],
};
export default config;Components
Import only the components you need:
import { Button, Card, Input, useTheme } from 'abit-ui';Available Components
| Component Category | Components | | ------------------ | -------------------------------------------------------- | | Alert | Alert | | Button | Button | | Card | Card, CardHeader, CardBody, CardFooter | | Chip | Chip | | Divider | Divider | | Image | Image | | Input | Input | | Link | Link | | Modal | Modal, ModalHeader, ModalBody, ModalContent, ModalFooter | | Typography | Title, Paragraph | | Feedback | Spinner, Skeleton |
Utility Hooks
| Hook | Description | | ------------- | -------------------------------------------------- | | useTheme | Access theme values | | useDisclosure | Manage open/close state for components like modals |
Icons
All icons are available under the icons namespace:
import { Icons } from 'abit-ui';
// Usage
<Icons.IconX />;Component Examples
Button
import { Button } from 'abit-ui';
<Button variant="primary" onClick={() => console.log('Clicked!')}>
Click Me
</Button>;Card
import { Card, CardHeader, CardBody, CardFooter } from 'abit-ui';
<Card>
<CardHeader>Title</CardHeader>
<CardBody>Content goes here</CardBody>
<CardFooter>Footer content</CardFooter>
</Card>;Modal
import {
Modal,
ModalHeader,
ModalBody,
ModalFooter,
useDisclosure,
} from 'abit-ui';
function Example() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalHeader>Modal Title</ModalHeader>
<ModalBody>Modal content goes here</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</Modal>
</>
);
}Theming
Customize the theme by passing a theme object to the ThemeProvider:
<ThemeProvider theme={customTheme}>{/* Your application */}</ThemeProvider>TypeScript Support
All components are fully typed. You can import types for props when needed:
import type { TButtonProps } from 'abit-ui';Tree Shaking
The design system is optimized for tree shaking. Only the components you import will be included in your bundle.
Contributing
Contributions are welcome! Please follow the contribution guidelines.
License MIT