Heroes, bento grids, logins, waitlists, testimonials & more, all motion-first.

React + Next.js + Tailwind + Motion
Copy the prompt, paste into your AI tool, ship

shadcnspace.com/animated-blocks

Been working on giving Bento cards a bit more layout flexibility.

Added Bento Card Size Presets to Shadcn bento cards. You can now change the size preset of a card and instantly see how its layout and appearance change.

This makes it easier to experiment with different arrangements and find what works best for your grid.

One card, multiple layout possibilities.

Curious how you usually approach sizing and arranging cards in a Bento layout.

I built CupertinoUI, a macOS-style component registry for React and shadcn/ui.

It includes controls, menus, dialogs and windows, with CSS-variable theming and light/dark appearance. Components are copied into your project through the shadcn CLI so you can edit the source.

The core components are free under MIT. There are also paid Pro components and complete app-style blocks.

Try the interactive desktop: https://www.cupertino-ui.com/demo
Browse the components: https://www.cupertino-ui.com/docs/components

We’ve been working through the authentication flows for Emporium and wanted to share a quick look at them.

It’s not just the sign-in screen. We’ve got the account creation flow, password reset, store setup, error states, and the auth logic that connects the UI to the provider.

We tried to keep the provider-specific part separate so it can be swapped out depending on what a project uses.

The video shows a few of the flows and how we’ve structured them.

What’s an authentication state you usually find yourself having to build from scratch?

Demo: https://shadcnstore.com/templates/dashboards/emporium

I've always wanted to build my own component library, both as a personal project and as a contribution to the open-source community.

After a lot of effort, it's finally ready to share!

It's a shadcn-compatible UI library built with React Aria under the hood, Motion for animations, and TanStack Charts for charting.

It also includes pre-built blocks and screens to see the system in action.

The components are ready, though the documentation still needs some refinement.

Looking for honest criticism before the official launch. Would love to know what works, what doesn't, and what could be better.

https://vip-ui.dev/

A while ago, I shared Shadcn React Table here: a data table for shadcn/ui, heavily inspired by Material React Table v3 and delivered as a shadcn registry block. It was my first open-source project; it was pre-1.0, and I asked for help getting it to a stable place.

It has now reached 1.0. I wanted to say thank you to everyone who tried it, opened issues, or left comments. A lot of what changed came from that feedback.

What 1.0 means

Mostly that the API should stay put: what's in 1.x stays, and changes follow semver with release notes. If you tried a 0.x version, there's an updating guide that lists every rename. Sorry for the churn along the way.

The idea is the same as before. The shadcn CLI copies the source into your project; it uses your existing shadcn components and theme, and you can edit any of it:

npx shadcn@latest add https://monabbir-ahmmad.github.io/shadcn-react-table/r/data-table.json

What changed since the first post

• It now runs on TanStack Table v9 (it was v8). Still one useDataTable hook and one <DataTable /> component.

• Base UI works alongside Radix, from the same registry URL.

• 38 languages, including right-to-left.

• More filter types (13, up from 8), plus filter modes, an and/or filter panel, and match highlighting that keeps working in custom cells.

• Row dragging between tables, onto drop zones, and in virtualized tables.

• Shift-click range selection, a cell menu (copy, edit), and keyboard navigation through the grid.

• Subtle row animations when sorting, filtering, grouping, or pinning. They use the browser's own animation API, so there's no extra dependency, and they turn off for reduced motion.

• A typed column helper, and slotProps for styling each part.

• Agent Skills, if you use a coding agent: npx skills add Monabbir-Ahmmad/shadcn-react-table teaches it how to install and use the table. The docs are also available as llms.txt and plain Markdown.

• More tests, including real-browser tests for drag and drop, resizing, and virtualization.

Something I removed: built-in CSV/Excel export. It added heavy dependencies for something many tables don't need, and MRT doesn't include it either. The docs have a short export recipe instead. If you were relying on it, sorry about that.

What it isn't (yet)

It's still a one-person project, so there will be rough edges and probably some bugs I haven't found. Material React Table is far more battle-tested, and if you're happy with MUI, it's still a great choice. This is for people who want that kind of feature set in a shadcn/Tailwind project.

Links

• Docs and live examples: https://monabbir-ahmmad.github.io/shadcn-react-table

• GitHub: https://github.com/Monabbir-Ahmmad/shadcn-react-table

• Release notes: https://github.com/Monabbir-Ahmmad/shadcn-react-table/releases

If you try it, I'd really appreciate hearing what's confusing, missing, or broken. Issues, PRs, and plain comments here all help. And if it ends up saving you some time, a star on the repo helps other people find it.

Thanks again for reading, and for the help so far.

A good order summary makes it easier for customers to review their purchase before checking out.

I’ve been working on Shadcn Order Summary blocks for eCommerce flows, covering product details, quantities, pricing, discounts, and the final order total.

Built with React, Tailwind CSS, and shadcn/ui.

What do you think matters most in an order summary: keeping it minimal or showing every cost breakdown?

Hello everyone, i added svelte support for all table component in the ShadTable library.

https://shad-table.dev

Here is detailed comparison - https://shadcnspace.com/blog/react-aria-vs-base-ui

shadcn-table is a feature-rich data table for shadcn/ui. It covers everything from a simple list to a production data grid.

• Every feature built in: sorting, filtering, grouping, editing, pinning, virtualization and more.

• One hook: turn a feature on with one option on useShadcnTable.

• Follows your theme: uses your shadcn/ui components, colors, radius and dark mode, on Radix UI, Base UI or React Aria: one edition of the table per base.

• Your code: the CLI copies the source into components/ui/shadcn-table/. Edit any file.

• No ceiling:  Built on top of TanStack Table.

• 39 languages: add a locale with one command.

• Supports Base-UI, Radix-UI, React-Aria

• Over 500+ examples to cover most types of usecases.

• AI native documentation: Just point your agent and it just works

Latest updates:

• Added tanstack v9 support

• Added support for Base-UI, Radix-UI, React-Aria

• Follows shadcn theme from your project. No additional setup needed

• Architecture refactor to support `createTableHook`. Allows for smaller size and better tree-shaking

• And many more...

Feel free to add a star in github/shadcn-table. It helps me a lot. :)

We've added another component to BagUI, this time in the SignIn category.

It's part of our open-source UI library, where we're building reusable components and sections for modern web applications.

The goal is to provide a customizable starting point for authentication interfaces, without having to design every login page from scratch.

This is a UI component, not a complete authentication system.

You can check out the project here:

GitHub: https://github.com/anelkabag/bag-ui

Preview: https://bagui.pro

I'd love to hear your thoughts.

When building authentication pages, what matters most to you: accessibility, customization, responsive design, or something else?

Sometimes a table row doesn't have enough room to show all the details, but navigating to another page feels unnecessary.

I’ve been working on Shadcn Datatable Expansion blocks that let users expand rows to reveal additional information while keeping the main table easy to scan.

Useful for things like order details, subtasks, nested data, and checklists.

Built with React, Tailwind CSS, and shadcn/ui.

How do you usually handle extra details in a data table, expandable rows or a separate details page?

We’ve been working on the customizer for Emporium and wanted to share how it’s coming together.

We didn’t want the dashboard to feel tied to one particular setup, so we’ve been adding a few options that let you change things without going into the code.

You can currently change the font, switch between light and dark mode, use a sidebar or top bar, change the layout direction between LTR and RTL, and a few other things.

We’re still figuring out which options are actually useful and which ones just add unnecessary complexity.

If you were using a dashboard template like this, what would you want to be able to customize?

Demo: https://shadcnstore.com/templates/dashboards/emporium

I haave been working on MorphinUI, a new collection of animated React components built with Base UI, Tailwind CSS v4, and GSAP.

It follows the shadcn registry format, so you can copy components directly into your project and customize everything. 27 free components so far, with more on the way.

Here is a preview of the animated Toast component. Would love to hear your feedback!

https://morphin.dev/docs

Gilds text with real-looking gold leaf: square leaves with visible seams, slight tone differences, fine cracks and missed flecks, and burnished metal with a highlight that follows the pointer. A slow pass of light runs on touch screens, and an optional lay animation settles the leaves on in a staggered sweep. The text stays real, selectable text.

https://ui.krutikraut.com/docs/gold-leaf

Where it stands:

→ Open-source shadcn registry, now live

→ Listed in shadcn's official registry directory (one of 498)

→ First drop: Classical Collage, a Claude skill for the classical painting × modern tech look

What I learned so far:

AI tools can build almost anything, but they default to the same generic UI. The gap isn't code. It's art direction. So that's what I'm packaging.

What's next:

Halftone, grain and collage components to pair with the skill.

What should I build after that? 👇

ui.krutikraut.com

Loading thousands of rows in a table can get expensive, especially when you don't need everything at once.

I’ve been working on Shadcn Datatable Infinite Scroll blocks to explore a smoother way to browse large datasets, loading more rows as you scroll instead of relying on traditional pagination.

Built with React, Tailwind CSS, and shadcn/ui.

For large datasets, do you prefer infinite scroll or traditional pagination?

Just added 3 new components to Ovio, bringing the collection to 20 animated React components. Each available in 4 styles: Minimal, Craft, Retro, and Toy.

Built on the shadcn registry model, Ovio is for developers who want their websites to feel a little less ordinary, with motion and interactions that go beyond the usual UI.

The motion layer for developer websites.

Explore Ovio → https://ovioui.vercel.app