Shadcn-Extras

Make your website stand out with beautifully crafted UI + Motion components.
Simple to use, highly customizable, and open source.
Built for engineers, designers, and founders who want production-ready animations and UI building blocks.

Shadcn-Extras is a growing collection of animated and interactive UI components built with React, Motion, and Tailwind CSS.
From Accordions and Toolbars to KPI Cards, Leaderboards, and Spinners, every component is designed to be developer-friendly, accessible, and easy to customize.

🚀 Vision

Most libraries focus only on plain UI or just raw animation snippets.
Shadcn-Extras bridges the gap by offering:

• Practical components → not just demos, but real pieces you can drop into production apps.
• Motion-powered animations → smooth, engaging transitions that feel natural.
• Customization first → tweak tone, size, colors, layout, and variants easily.
• Docs + Examples → every component ships with usage docs and live code samples.

✨ What’s Included

• UI Components → Accordion, Toolbar, Tabs, Tooltip, etc.
• Data-Driven Cards → KPI Card, Leaderboard Card.
• Animated Backgrounds & Groups → bring layouts alive with motion.
• Spinners & Loaders → beautiful animated indicators (radial, concentric rings, dots, etc.).
• Utility Hooks & Helpers → simplify integration in React + Next.js.

…and more coming soon!

🔧 Easy to Use & Customize

Each component comes with:

• Copy-paste ready code you can drop into your project.
• CLI support → npx shadcn-extras add <component> for quick installs.
• Tailwind + Motion variants so you can match your own design system.

❤️ Open Source & Community-Driven

Shadcn-Extras is fully open-source.
We welcome contributions, feedback, and new ideas to make the library the go-to resource for animated Shadcn-style components.

⚡ Use Shadcn-Extras to add polish, motion, and clarity to your apps — without reinventing the wheel.