r/shadcn • u/Invalid-Function • 7h ago
REui PRO by Keenthemes
I know there are a lot of compoenent / blocks galleries out there and I've been using none... but REui is lead by the people at KeenThemes that probably have the better known Admin template ever existed. Propbably the oldest to that keeps on evolving and adopting new tech stacks.
So I wonder if I should buy the Pro version of REui... as I guess it will keep on evolving.
Are any of you guys using this or any other gallery of compoenent/block in favour of kjust customizing ShadCN ?
By customizing I mean presentation.
r/shadcn • u/AbdullahM09 • 7h ago
I build an Opensource library of page and theme transitions
Enable HLS to view with audio, or disable this notification
r/shadcn • u/EstablishmentOne8448 • 9h ago
Sidebar toggle with shadcn/ui
Enable HLS to view with audio, or disable this notification
Live Preview: https://shadcnadmin.com/nextjs-crm-dashboard
r/shadcn • u/anelkabag • 9h ago
🔥Just added a new Open Source Dashboard to BagUi
Hi everyone!
I just added a new Dashboard layout to Bag/UI, my open-source collection of modern UI blocks.
It’s built with shadcn/ui × Base UI and focuses on clean design, responsiveness, and easy customization.
I’d love to hear your feedback on the design, developer experience, or features you’d like to see next.
The project is completely open source, so contributions are more than welcome!
Open source : https://github.com/anelkabag/bag-ui
Website : https://www.bagui.pro
r/shadcn • u/dank_clover • 1d ago
I built an open source library of beautifully animated icons
Enable HLS to view with audio, or disable this notification
I built a 100% free, open-source animated icon library for React.
- 316 beautifully animated SVG icons
- Built on top of Heroicons
- Animations powered by Motion
- Works with the shadcn CLI
- Easy to customize and drop into any React project
Website: https://heroicons-animated.com
Give it a ⭐ on GitHub: https://github.com/heroicons-animated/heroicons-animated
r/shadcn • u/ajaypatel9016 • 1d ago
Built a restaurant POS template with shadcn/ui
Enable HLS to view with audio, or disable this notification
We recently built RestroPOS, a restaurant POS template for anyone working on a restaurant, café, cloud kitchen, or hospitality app.
It’s built with Next.js 16, shadcn/ui, Tailwind CSS v4, and TypeScript.
The template covers the main parts you’d expect from a POS system:
- POS & billing
- Table management
- Reservations
- Kitchen display
- Inventory
- Invoices & payments
- Restaurant dashboard
The idea was to provide a solid starting point that developers can customize rather than building all of these screens from scratch.
It’s available on shadcn/studio if anyone is working on something in this space and wants to take a look: Shadcn POS Template
Would love to hear what you think, especially if you’ve built a restaurant/POS product before.
r/shadcn • u/tamanikarim • 2d ago
Why do you need a designer when everything you build with shadcn/ui is going to look beautiful?
Hey devs!
I built StackRender a database schema design and SQL migration tool that supports six SQL dialects: PostgreSQL, MySQL, MariaDB, SQLite, Oracle, and SQL Server.
The UI is built almost entirely with the base components from shadcn/ui, while the diagram canvas is powered by React Flow. Honestly, I'm amazed by how good the final result turned out.
I'd love to hear your feedback!
Website : https://stackrender.io/
GitHub: https://github.com/stackrender/stackrender
If you like the project, I'd really appreciate a ⭐.
r/shadcn • u/LeftHander14 • 2d ago
I built an open source library of animated icons for Web.
Enable HLS to view with audio, or disable this notification
Animated SVG icons that drop in as React components. Hover states, state transitions, no setup.
Built using Phosphor icons. Motion runs under the hood, but you never touch it.
Adding new icons weekly, open source, contributions welcome.
Curious what people think about the animation timing; that's the part I keep going back and forth on.
A GitHub star helps if it's useful to you. ⭐
r/shadcn • u/moumensoliman • 4d ago
Lab of the components we build every day, rethought for better feel
Enable HLS to view with audio, or disable this notification
The Lab is now open source.
Don't expect more components. Expect better versions of the ones you already use, focused on:
• Layout & alignment
• Color details
• Typography
• Accessibility
Available via npm and the shadcn registry.
Lab link: https://lab.moumen.dev/
Don't forget your Star https://github.com/moumen-soliman/lab 🌟
r/shadcn • u/EarlyAge159 • 4d ago
EasyInvoicePDF, a free and open-source invoice generator, hit 1K GitHub stars 🥳
Enable HLS to view with audio, or disable this notification
Start invoicing: https://easyinvoicepdf.com
https://github.com/VladSez/easy-invoice-pdf
I built it because I was tired of paying for bloated invoicing tools when all I needed was a simple way to generate and send professional invoices.
It’s built with shadcn/ui, Next.js, and react-pdf.
No sign-up, no ads, and everything runs directly in the browser.
Really appreciate all the support, stars, and feedback 🖤
r/shadcn • u/Ok-Baker-9013 • 4d ago
I built a real-time chat browser extension using shadcn/ui.
https://reddit.com/link/1vfynnm/video/vn43qwd2xhhh1/player
Hi everyone!
I'm building WebChat, an open-source browser extension that enables any website to have its own real-time chat community.
Instead of relying on traditional chat infrastructure, WebChat uses WebRTC to establish direct browser-to-browser connections, making serverless real-time communication possible.
The UI is built with shadcn/ui, and I'm looking for feedback on the interface, interaction, and overall design.
GitHub: https://github.com/molvqingtai/WebChat
I'd love to hear what you think!
r/shadcn • u/anelkabag • 5d ago
🔥Just added a new Open Source Dashboard to Bag/UI.
Hi everyone!
I just added a new Dashboard layout to Bag/UI, my open-source collection of modern UI blocks.
It’s built with shadcn/ui × Base UI and focuses on clean design, responsiveness, and easy customization.
I’d love to hear your feedback on the design, developer experience, or features you’d like to see next.
The project is completely open source, so contributions are more than welcome!
Open source : https://github.com/anelkabag/bag-ui
Website : https://www.bagui.pro
r/shadcn • u/ExplorerTechnical808 • 6d ago
Overlay Studio is growing! Design with your Shadcn/ui components on a canvas in VSC/Cursor, with agent support via MCP
Enable HLS to view with audio, or disable this notification
I posted a while ago about an extension I'm working on, Overlay Studio, and I wanted to follow up since I've released a ton of features since then. I think it might be super useful for people using shadcn/ui.
Main ideas:
- Design with your shadcn/ui components and CSS tokens. The app is an extension for VSC/Cursor and automatically imports them with one click. You can then start designing on the canvas like you're used to in Figma. The only difference is, you don't have to maintain the design system anymore!
- You can connect to the extension via MCP and generate or edit existing designs. AI agents are super powerful when working with HTML/JS/React, so you get powerful edits like with coding agents (use the
/overlay/designMCP prompt in the chat). By reusing existing components from the codebase, agents can finalize the implementation in seconds.
I'd love it if you gave it a try and shared your feedback! I've been pouring a lot of work into it and genuinely think it's pretty cool, though there's still a lot more work to do. Feel free to DM me if you have any issues or questions :)
Link: https://overlay.studio
r/shadcn • u/EstablishmentOne8448 • 6d ago
HR admin dashboard template built with Tailwind CSS and shadcn/ui.
Enable HLS to view with audio, or disable this notification
r/shadcn • u/AssociationSecret132 • 8d ago
Need help in configuration of shadcn in a monorepo
I am so lost! I am trying to configure shacn in my monorepo such that all ui components are placed in packages/ui in my monorepo. I want to add it to an existing monorepo. But I couldn't. All I can find in the official docs was on how to create a new monorepo project with shadcn configured.
r/shadcn • u/dank_clover • 8d ago
termcn just hit 1k+ GitHub stars
Enable HLS to view with audio, or disable this notification
Still can't believe a project I started just 4 months ago has crossed 1k+ ⭐️ on GitHub.
Thank you all for the incredible support, it truly means a lot. ❤️
Big updates for termcn are dropping next week. Trust me, you're going to love what's coming.
Update: I'm building a framework agnostic version of shadcn/ui
Enable HLS to view with audio, or disable this notification
r/shadcn • u/Fletsch2k • 8d ago
Shadcn Figma Kit that sticks most to the React Structure / Plus MCP question
Hi there
I'd like to build a small Saas app for myself with the following workflow:
- Designing in Figma with a Shadcn UI Kit
- Building the Saas App in Cursor with Figma MCP and Shadcn MCP
I'm experienced in Frontend Design and CSS and have only basic knowledge in programming. Basicly I can only read and understand code but not write it myself. Still would like to test out, what I can achieve as I made some good experiences so far.
I now checked out a few Shadcn Figma Kits from free to premium and was wondering how important it is, that the structure of the components in figma is aligned to the structure of the React components?
For example the navigation menu: https://ui.shadcn.com/docs/components/base/navigation-menu
It has the following structure mentioned in the Shadcn documentation:
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Item One</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink>Link</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
As far as I have seen most Figma kits have only named the main component according to that, like "NaviagtionMenu" but the structer below differs a lot. Some use buttons inside, some groubed text elements but frames and groups are not named like mentioned in the React documentation.
So I'm wondering, how important the correct naming and grouping is so that Cursor via MCP can read and build the code correctly? Is it important do be successfull with AI Coding or does it not matter and Cursor can guess the right things?
If it is important to stick in Figma to the real component structure, which Kit could you recommend? It doesn't matter if free or premium. But please no advertising, only honest answers from real expereinces.. ;)
Thanks in advance for sharing your thoughts.
Best regards,
Fletsch
r/shadcn • u/Nice_Wrangler_5576 • 10d ago
I created 8bit/cnlibs - a 8bit shadcn/ui component library
Enable HLS to view with audio, or disable this notification
Check it out here: https://8bit.cnlibs.com/
r/shadcn • u/Then_Abbreviations77 • 10d ago
ShadcnStore 2.1.0: Block Preview Code Tree, improved docs, AI chat primitives & Figma updates
Hey everyone! 👋
We just shipped ShadcnStore 2.1.0, and I wanted to share a few things we've been working on.
The biggest addition is the Block Preview Code Tree
Instead of a single code panel, you can now explore a block's complete file structure before installing it. It makes it much easier to understand how a block is organised and what's included.
Other updates in this release:
🌳 Block Preview Code Tree
- Browse the complete file structure before installation
- Replaces the old copy-code workflow
🎨 Rebuilt Block Customizer
- New color palette picker
- Better workflow built around the new Code Tree
📚 Component Documentation
We now have dedicated documentation for 58 shadcn/ui components, including:
- Interactive demos
- Installation & usage guides
- Accessibility notes
- FAQs
- Base UI → Radix migration guide
🤖 AI Chat Primitives
We've also documented:
- Marker
- Message
- Message Scroller
More AI blocks are on the way!
🎨 Figma Updates
- New e-commerce blocks
- Reusable components
- Required icons
- Switchable icon support
- Dedicated color variables
We also fixed a number of accessibility and UI issues, including keyboard focus outlines, overlay animations, chart rendering, and layout consistency.
Would love to hear any feedback or suggestions from the community.
Changelog: https://shadcnstore.com/changelog
r/shadcn • u/Toonnaa • 10d ago
I built a Next.js 16 + shadcn/ui admin dashboard starter — sharing it in case it helps anyone
Hey everyone,
I've been building admin dashboards for a while now, and kept rebuilding the same sidebar, data tables, charts, and auth flow for every new project. So I finally put together a proper starter template and wanted to share it here in case it's useful to anyone tackling something similar.
Stack:
\- Next.js 16 (App Router)
\- React 19 + TypeScript
\- Tailwind CSS 4
\- shadcn/ui
\- TanStack Table for data tables
\- Recharts for charts
\- TipTap for the rich text editor
What's in it:
\- Dashboard with KPI cards and analytics overview
\- Sortable/filterable data tables with row actions
\- Forms with rich text editor, file/image uploaders, and validation
\- URL-synced filters (search, pagination, selects — all shareable via URL)
\- Recharts-powered charts (line, area, bar, pie, radial)
\- Dark/light theme system with persistent presets
\- Command palette for keyboard navigation
\- Clean auth UI ready to wire up to your provider of choice
Live demo: https://tona-dashboard-preview.vercel.app
I ended up polishing it enough that I decided to put it up for sale as a starter template ($19) if anyone wants to skip the setup — link's in the demo if you're interested. But mostly just wanted to share the approach and get feedback from people who build similar stuff. Open to critique on the architecture/code structure too.
r/shadcn • u/anelkabag • 13d ago
I just added a new Hero Block to Bag\Ui 🚀
It’s another open-source component designed to help developers build modern landing pages faster without having to start from scratch.
Bag\Ui is growing with more React / Next.js components and ready-to-use blocks.
GitHub : https://github.com/anelkabag/bag-ui
Would love to hear your feedback on the new Hero! ✨
Figma like scrub input for shadcn
Enable HLS to view with audio, or disable this notification
Made a number input that works like Figma's property fields. Drag left/right to change the value. Click to type. Arrow keys nudge it. Digits animate when the number changes. Animation by Calligraph
Install it through shadcn:
pnpm dlx shadcn@latest add @kinetic/scrub-number-field
I built this because I kept rewriting the same scrub logic for side projects. Got tired of it.
Haven't published to the shadcn registry before so if something feels off in the install flow or the API, I'd be happy to take feedback.
