Griffin UI is a modern, flexible React component library designed to help developers build fast, clean, and responsive interfaces with minimal effort. Built for React and Next.js applications, it includes a growing collection of reusable UI components.
⚡️ Fast setup. 🎨 Clean design. 🧩 Developer friendly.
npm install griffinuior
yarn add griffinui- Import global styles (once in your root entry file):
import 'griffinui/dist/index.css';- Use components in your app:
import {
Button,
Badge,
Divider,
Skeleton,
Spacer,
Tooltip,
Tabs,
} from 'griffinui';<Button onClick={() => alert('Clicked!')} variant="primary" size="md">
Click Me
</Button>Props:
variant:primary|secondary|outlinesize:sm|md|lg
<Badge color="green">New</Badge>Props:
color:blue|green|red|gray
<p>Above</p>
<Divider />
<p>Below</p>Props:
thickness,color,margin(optional)
<Skeleton width="200px" height="20px" />Props:
width,height
<Spacer size="lg" />Props:
size:xs|sm|md|lg|xl
<Tooltip content="Tooltip text">
<button>Hover me</button>
</Tooltip>Props:
content: tooltip textposition:top|right|bottom|left(optional)
<Tabs
tabs={[
{ label: 'Tab 1', content: <p>This is Tab 1</p> },
{ label: 'Tab 2', content: <p>This is Tab 2</p> },
]}
/>Props:
tabs: Array of{ label: string, content: ReactNode }
Griffin UI components are lightweight and styleable. You can extend or override styles using your preferred CSS-in-JS solution or utility classes.
Component previews and documentation will be available in the Storybook UI shortly.
Pull requests are welcome!
git clone https://github.com/rajanprajapati/griffinui
cd griffinui
npm install
npm run devMIT License © Rajan Prajapati
Star the repo and share your feedback to help improve Griffin UI!