r/shadcn

When I first started building mobile apps with CapacitorJS, I was completely lost. There are so many ways to structure an app, choose plugins, and decide what should stay web vs native.

After building more Capacitor apps, I created Capstart: a simple and opinionated guide to build CapacitorJS apps with React, Supabase, shadcn/ui, and useful native plugins.

It’s not “the only way” to use Capacitor, just a clear starting point I wish I had when I began!

https://capstart.dev

shadcn has a block for almost everything except the one widget that shows up in every real app — a tree-view. I just shipped one: @grida/tree-view, installable as a shadcn block. One line in your project and you've got the same tree-view shape behind Figma's layers panel, VS Code's file explorer, Notion's sidebar, and Finder's columns — themed with your own Tailwind tokens, like every other shadcn component.

npx shadcn@latest add https://grida.co/r/tree-view-row.json

Five live themed demos on the landing page so you can see the same engine wearing five different skins: https://grida.co/packages/@grida/tree-view Drop it in, restyle it, ship it.

6 new shadcn registries dropped in the middle of may 2026

trophy-ui, wensity, corr, paddle, framecn, turbopills-ui

links to the registires can be found here

I needed address autocomplete in a Next.js form and kept landing on examples that still use AutocompleteService or the old embedded Google widget based on u/vis.gl/react-google-maps . Google’s current docs push you toward AutocompleteSuggestion instead. Even codex struggled to nail it in one shot. Took me a bit to wire that up with shadcn/ui, so I packaged it as a registry component.

It’s a normal shadcn-styled input with a suggestion dropdown, debounced search, keyboard nav, and session tokens so the autocomplete + place-details calls bill as one session. onPlaceSelect gives you { address, lat, lng, placeId } without dragging google.maps types through your app. There’s an optional countryCode prop if you want to bias results.

"use client"

import { PlacesAutocomplete } from "@/components/ui/places-autocomplete"

export function AddressField() {
  return (
    <PlacesAutocomplete
      placeholder="Search for an address"
      onPlaceSelect={(place) => {
        console.log(place.address, place.lat, place.lng, place.placeId)
      }}
    />
  )
}

You will need Maps JavaScript API and Places API (New) enabled, plus NEXT_PUBLIC_GOOGLE_MAPS_API_KEY. Lock the key to your domains with HTTP referrer restrictions.

And I know, mapbox is a solid choice if you control the stack, but some products still need Google for user trust and the rich address coverage it provides.

Demo: https://shadcn-google-maps.vercel.app/

Happy to hear any feedback or ideas! A star on the repo is always appreciated.

I'm a Brazilian frontend developer and for the past few months I've been spending a lot of time building UI components, animations and experimenting with frontend interactions.

A lot of these ideas came from things I was creating at work and in personal projects, so I decided to turn everything into a public open-source library called Matos UI.

Still a work in progress, but I finally felt like sharing it publicly.

Would love to hear what you guys think 🙌

Over the last 6–8 months, I’ve been spending most of my time building interactive frontend experiments and polished UI systems.

This video is a small collection of some of the things I worked on:

• animated components
• dashboards
• landing pages
• portfolio experiments
• WebGL shaders
• UI / motion interactions

Mostly built using React, Next.js, Tailwind, Motion, and GSAP.

I’ve been trying to focus not just on visuals, but also on performance, responsiveness, and building production-ready frontend experiences.

Would love to hear what people think.

Live Demo: https://shadcnuikit.com/dashboard/real-estate
Other dashboards: https://shadcnuikit.com/admin-dashboard

Go check it out. New email dashboard:

https://github.com/arhamkhnz/next-shadcn-admin-dashboard

Base UI Version: https://github.com/arhamkhnz/next-shadcn-admin-dashboard-baseui

I ran a script across a huge number of shadcn preset combinations and turned a small subset of the results into a filterable page with 8,000+ high contrast presets.

You can:

• filter presets that already fully pass AA contrast checks
• preview real UI with presets applied
• save presets for later simply by clicking the heart button

Fun fact: from everything tested so far, only the mauve presets consistently achieved 100% AA contrast for normal text across the entire system.

Check them out here: high contrast shadcn presets

Feedback welcome!

Do check them out from here - https://shadcnspace.com/blocks#ecommerce

Let us know if you have any feedback or you need us to add specific blocks and components.

Go check it out. New E-commerce dashboard:

https://github.com/arhamkhnz/next-shadcn-admin-dashboard

Base UI Version: https://github.com/arhamkhnz/next-shadcn-admin-dashboard-baseui

if you want your landing page to look different, the answer is shader, I put together a small list of shader components you can copy-paste into your app: shoogle.dev/shadcn-components/shader

The AI video generation space is quite heating up with Remotion, Hyperframes, Editframe, etc. and it has never been more easier to create videos with code.

That's when I came across remocn which is shadcn/ui-style registry for video components built using Remotion but Remotion has its limitations that Editframe solves by making use of pure HTML, CSS.

So I built framecn, a shadcn/ui-style registry for video components.

Some of the features:

• Built on Editframe
• Zero config, one command setup.
• shadcn/ui compatible (simply copy-paste)
• 50+ components
• Fully customizable

100% free and open-source.

GitHub: https://github.com/shadcn-labs/framecn
Docs: https://www.framecn.dev/

Demo: https://shadcnuikit.com/dashboard/real-estate

I was always amazed by this and I want to stars creating animations for my own project. Can anyone tell me how to do this? Is this a gif or another format type? What tool, what language? Can it be done faster with an ai tool? Do i need to code it or is there a visual tool for it?