https://github.com/nayanrdeveloper/shadcn-extras
A reusable, production-ready React UI component library with styled-components, Storybook, and TypeScript support.
https://github.com/nayanrdeveloper/shadcn-extras
ci-cd-pipeline component-library npm open-source react storybook styled-components typescript ui-components
Last synced: about 1 month ago
JSON representation
A reusable, production-ready React UI component library with styled-components, Storybook, and TypeScript support.
- Host: GitHub
- URL: https://github.com/nayanrdeveloper/shadcn-extras
- Owner: nayanrdeveloper
- License: mit
- Created: 2025-07-05T06:51:33.000Z (3 months ago)
- Default Branch: dev
- Last Pushed: 2025-08-22T17:02:28.000Z (about 2 months ago)
- Last Synced: 2025-08-22T18:53:50.057Z (about 2 months ago)
- Topics: ci-cd-pipeline, component-library, npm, open-source, react, storybook, styled-components, typescript, ui-components
- Language: TypeScript
- Homepage: https://nayanrdeveloper.github.io/pixelcrate/
- Size: 222 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# shadcn-extras
✨ Beautiful, animated UI components for React & Next.js, built with [Motion](https://motion.dev/) and [Tailwind CSS](https://tailwindcss.com/).
Easy to use. Customizable. Open Source.
**Note:** This project is in active development — new components and improvements are added regularly.
---
## 🚀 Features
- 🎨 Ready-to-use **animated UI components**
- ⚡ Built with **Motion** for smooth animations
- 🎯 **Tailwind CSS friendly** and easy to theme
- 🔧 Works seamlessly with **shadcn/ui**
- 📚 Detailed **documentation** & code examples
- 🛠️ Extensible — copy, customize, and adapt
---
## 📖 Documentation
Full documentation and examples are available at:
👉 [nayanrdeveloper.github.io/shadcn-extras/docs](https://nayanrdeveloper.github.io/shadcn-extras/docs/)
---
## 📦 Installation
```bash
# Using npm
npm install shadcn-extras
# Or with pnpm
pnpm add shadcn-extras
# Or with yarn
yarn add shadcn-extras
```
### Requirements
- React 18+
- Tailwind CSS
- [Motion](https://motion.dev/) (installed automatically via CLI or manually)
If you are already using **shadcn/ui**, you don’t need to create a `lib/utils.ts` file.
Otherwise, make sure to install helpers:
```bash
npm install clsx tailwind-merge
```
and add `lib/utils.ts`:
```ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
```
---
## 🧩 Usage
Example: Add a component via the CLI
```bash
npx shadcn-extras add kpi-card
```
Then import it into your project:
```tsx
import { KpiCard } from '@/components/shadcn-extras/kpi-card';
export default function Example() {
return ;
}
```
Check the [docs](https://nayanrdeveloper.github.io/shadcn-extras/docs/) for full examples.
---
## 🤝 Contributing
We welcome contributions!
Please read our [Contributing Guide](./CONTRIBUTING.md) to learn how to set up the repo, add components, run lint/format, and submit PRs.
---
## 📜 License
Licensed under the [MIT License](./LICENCE.md).