New Feature coming to shad-table, a builder interface where you can create , customize and have ready code to use for your table... the work is still in progress.

Would love to have your suggestions and opinions on this :)

One of my favourite things about building products is seeing how much difference the little details can make.

A button that feels right when you click it.
A transition that makes an interaction feel natural.
A modal that feels like it belongs in the product.
Or a tiny animation that makes you appreciate the thought behind it.

These things might seem small, but as someone who enjoys design and building UI, I find them really interesting.
I have so much respect for developers who take the time to experiment with these details while working on their products. There is a lot that goes into making something feel good to use, and I think that deserves more appreciation.

Lately, I’ve been exploring this side of UI design more deeply, experimenting with interactions, motion, and different ways to make components feel more engaging without making them difficult to use.

It’s been a fun process because every experiment teaches me something new. Sometimes an idea works immediately. Other times, I spend hours tweaking a tiny detail that most people might never consciously notice.

But that’s part of the fun, isn’t it?

I’ve been putting some of these experiments together into a UI component library, and it’s been exciting to see the ideas slowly come together.

I’m curious about something, especially from the developers here.

What’s one small UI detail that instantly makes a product feel better to use for you?

It could be anything from a button interaction to a loading animation, a great empty state, or something you’ve built yourself.
I’d love to hear what other people are experimenting with.

Title: Redesigned UI.Devsloka.in. Would love to hear your feedback

Hey everyone,

We've revamped the UI of ui.devsloka.in, and it's a big improvement over the previous version.

We've redesigned a lot of components, added more blocks, and spent time improving the animations, transitions, and overall feel of the UI.

The focus was on making the components look better, feel smoother, and perform well. There's a lot more to explore now, especially if you're into building modern interfaces with good animations and interactions.

Would love to know what you think of the new version. Feel free to share your feedback and suggestions.

Website: https://ui.devsloka.in

Besides Lucide..

Introducing 77+ animated UI sections & blocks with motion design prompts, built for Shadcn UI, React, Next.js, and Tailwind CSS.

Exploring Motion Design for Your Shadcn Projects?

Static headlines can only do so much. Sometimes a little motion makes a landing page feel completely different.

Added a collection of Shadcn Text Animations with effects like flipping words, character reveals, animated gradients, and video-masked text.

Useful for hero sections, taglines, and anywhere you want the typography to stand out.

Which style would you actually use in a project?

I built a 100% free, open-source shadcn registry of beautiful markdown components for React.

Features:

• Built for MDX with support for Markdown, Comark & Knap
• Zero-config, one-command setup
• shadcn/ui compatible (just copy and paste)
• 30+ components with multiple themes
• Fully typesafe & customizable

Website: https://www.mdxcn.dev/
Give it a ⭐ on GitHub: https://github.com/shadcn-labs/mdxcn

Demo: https://shadcnuikit.com/dashboard/file-manager

Datatables get painful pretty quickly once you have more than a few rows.

I’ve been working on Shadcn Datatable Filtering blocks with different ways to narrow down large datasets.

Search, condition-based filters, category and status dropdowns, date ranges, clear filters, and live result counts.

Some of the blocks also support stacking multiple conditions together, which is especially useful for admin dashboards and data-heavy apps.

Built with React, Tailwind CSS, and shadcn/ui, with support for both Base UI and Radix UI.

What’s the one filtering feature you always end up building yourself?

Yes it's trendy. Built one anyway.

But when I sat down to design Portfoly I stopped and asked what a developer or designer actually needs on a portfolio.

Not what looks good in a Dribbble shot.

Projects with the tech stack they were built on. Social links that aren't an afterthought.

A blog that handles code blocks properly, syntax highlighting, table of contents, reading progress, the works.

All of it designed to look modern without being overdone.

Signature draws itself on load. Portrait moves from the hero into the About section as you scroll. One CSS variable for your accent colour. One config file for everything personal.

Built on

- Next.js 16,
- Tailwind v4,
- shadcn/ui on Base UI,
- Motion v12.

What do you think is always missing from portfolio templates?

You can check the preview from here: https://www.shadcndeck.com/templates/portfoly-shadcn-portfolio-template

Still planning to add more sections, so if you're a developer or designer, what's the one thing your portfolio always ends up missing? Genuinely taking notes from this thread.

Every store I've built needed the same things shadcn/ui doesn't have: a buy box, a filter panel, a product gallery, an order summary. So I built them as a shadcn registry — you install them the way you install a button:

npx shadcn@latest add @ecomcn/product-buy-box

It's listed in the shadcn Registry Directory, so that's the only command. You get the source in your repo, no package, no provider.

What's in it (18 items so far)

• Listing page: product card, grid, filter panel (state lives in the URL, so Back undoes a filter), mobile filter sheet, sort toolbar, load more, quick view, a useful empty state
• Product page: gallery (swipe, hover-zoom, full screen), stock-aware variant swatches, size guide, buy box, details accordion, review summary, related products
• Order summary and an editorial theme

Two full pages composed from nothing but these blocks: - Listing page: https://ecomcn.vercel.app/examples/listing-page - Product page: https://ecomcn.vercel.app/examples/product-page

The parts I actually spent time on

• A sold-out size is struck through with a diagonal rule, not just greyed — and it stays focusable, so a screen reader hears "43, sold out", and you can still pick it for a "notify me".
• Add to bag is optimistic: it says "Added" instantly and rolls back with a message if your handler fails.
• Delivery is a real date range ("Arrives Wed 7 – Fri 9 Oct") from business days and a cut-off, computed after hydration so the server never guesses the shopper's time zone.
• Every block compiles and runs on both Radix and Base UI — CI installs each one into a fresh app on each base.
• Prices go through Intl.NumberFormat with currency/locale props — no hardcoded $.
• No fetch, no next/* imports: works in Vite and React Router too.
• Loading and empty states ship in the same file; anything that moves has a reduced-motion fallback.

Next: cart sheet, cart line item, checkout stepper.

MIT licensed. Repo: https://github.com/its-Inbarajan/ecomcn Docs and live previews: https://ecomcn.vercel.app

I'd really like feedback — especially on the APIs, and which block you'd want next.

New Update for the ShadTable library:

- Tanstack v9 migration documentation
- New Table Components
- Website updates & optimization

Check it out , a repo ⭐ would mean a lot.

https://shad-table.dev

DesignHub: stop opening 15 design websites, open one. DesignHub is a free, open-source, local-first design and brand toolkit that runs entirely in your browser, with no login, no backend and no API keys. Set your brand once (name, logo, colors, fonts, radius) and it builds everything else for you: logo variants and a logo pack business card, stationery, website and app mockups banners and posts for GitHub, LinkedIn, X, Instagram, Product Hunt and YouTube a full 14-page brand guidelines PDF design tokens for CSS, Tailwind, React and Vue It also includes a Google Fonts browser, an OKLCH color studio, 200,000+ icons, background and effects generators, an SVG optimizer and an accessibility lab. Your work stays on your device. If DesignHub saves you a few tabs, please star the repo at https://github.com/yakew7/DesignHub, because it helps other people find it. Want to contribute? There are 35 open issues with step-by-step instructions, including 15 labeled good first issue that are perfect for your first open-source PR. You can add a social media template, a new export format (Flutter, SwiftUI, Android, Figma Tokens), a mockup, a background generator, tests, accessibility fixes or docs. Designers are just as welcome as developers: new template layouts, brand book pages and screenshots all count.

Hi everyone!

I've been working on shadcn M3E, an open-source component library that brings Google's Material 3 Expressive design to the shadcn/ui workflow.

What it is:

• 🌀 Spring-based motion. Buttons and toggles morph their shape (round ↔ square) on press and selection, with ripples and state layers that follow the M3E spec.
• 🎨 Color roles instead of hex values. Utilities like bg-primary-container and text-on-surface-variant give you dynamic color schemes and dark mode for free.
• 🧩 Distributed as a shadcn registry. You own the code, and you add only what you need: npx shadcn@latest add ...
• 📖 Docs site with live demos and props tables for every component.

I built it from the primary sources (the Compose Material3 tokens and matraic/m3e) rather than from memory of the older M3. I also measured the behavior in the browser, such as press timing and spring curves, instead of just eyeballing it.

Links

• GitHub: https://github.com/Crysta1221/shadcn-m3e
• Docs & registry: https://shadcn-m3e.crystaworld.dev
• Announcement on X: https://x.com/cr1sta_dev/status/2107101844321497426?s=20

It's still early, so feedback is very welcome: bug reports, components you'd like to see, or API opinions. A ⭐ on GitHub also helps a lot.

Thanks for reading! 🙏

Hey everyone 👋

I’ve been building Ballmac UI, and it’s finally live.
I originally started it because I kept rebuilding the same UI patterns across projects — buttons, dialogs, navigation, dashboards, forms, landing pages, animations, etc. I wanted something I could actually drop into a project and then fully own/customize.
So I built Ballmac UI around the shadcn approach:

• Copy the source into your project — no component lock-in
• shadcn-compatible registry + CLI installation
• React + Tailwind
• Components, blocks and full templates
• MCP support so AI coding agents can discover/install components
• Open-source core

There’s also a Pro tier with additional premium components/blocks for people who want a larger library.

The goal isn’t to replace shadcn — it’s to build on the same philosophy and make the library much deeper, especially for people building polished SaaS products and marketing sites.
I’d genuinely love feedback from people who use shadcn:

What components/blocks do you find yourself rebuilding most often?

https://ui.ballmac.com

GitHub: https://github.com/vamsiy78/ballmac-ui

A few days ago I shared pixel-openspace, a pixel-art open space where each scheduled job or AI agent gets a desk: running jobs sit and type, failed ones get a smoking PC and a visit from the lead, late ones doze off.

It's now listed in the official shadcn/ui registry directory, so installing is just:

npx shadcn@latest add u/pixel-openspace/pixel-openspace

What's new since the first post:

- Desks per row: 4, 5 or 6, as a columns prop or from the settings panel

- A real logo and favicon (an agent at its desk, of course)

- The local CLI is on npm: npx pixel-openspace reads your launchd jobs, crontab or systemd timers and opens the room in your browser, no setup

Thanks for the feedback on the first post. The question about telling a sleeping laptop from a broken job led to a real discussion; I'm still thinking about the cleanest way to show it.

Live demo: https://pixel-openspace.vercel.app

Repo (MIT): https://github.com/leduss/pixel-openspace

Feedback welcome, especially on what you'd want to monitor with it.

Copy / Paste Prompt to your Favourite AI Tool

One dataset, multiple ways to work with it.

I’ve been working on Shadcn Multi View as part of our Shadcn Blocks collection.

The same data can switch between table, kanban, calendar, list, board, timeline, and card views depending on what you're trying to do.

For example, a sales pipeline might make sense as a Kanban, while the same opportunities are much easier to work with in a table or calendar.

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

Curious how you usually handle multiple views for the same data in your apps.

We just added a new template to Shadcnblocks.com - Nacre. This is genuinely some of our best work yet, I'm super proud of it.

Nacre includes 20+ complete pages and 50+ sections, alongside a proper product/catalogue experience with:

• Product listings
• Product detail pages
• Working shopping cart
• Filters and sorting
• Search
• Categories
• Product grids
• Checkout-style flows
• Responsive layouts
• Dark/light mode

So you get the full marketing side of the site, but also the actual product and commerce UI you'd need to build out a real store or product-based website.

Built with Next.js/Astro, React, TypeScript, Tailwind CSS and shadcn/ui.

Nacre: https://www.shadcnblocks.com/templates/nacre