Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Making focus rings look great, consistent, and fully themable across all components.

shadcn

236,693 subscribers

105,925 views • 1 year ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

11 Comments

goncy.tsx1 year ago

Chadcn

Upper Deck1 year ago

Get inside the ring with AEW Allure cards! This 100-card base set is also packed with seven bold insert themes that bring the drama of the ring to life. It is one of the most colorful and dynamic releases of the year and your collection deserves the spotlight. Get it now!

Dan ⚡️1 year ago

he who controls the rings controls middle earth

ℤ𝕂yle1 year ago

GOATED update!

Igor bedesqui1 year ago

never stop setting a high bar. once you make this, I'll have to always do it because it became baseline, and we all get a better web

Jean P.D. Meijer — 🇪🇺 eu/acc1 year ago

looks it's awesome! already noticed it. i've been grabbing Tailwind v4 components from the repo.

Zack Chapple1 year ago

Had a lot of folks asking about accessibility of shadcn components vs something mui and material. Is there any guidance or comments on a11y and shadcn?

Henri Chab1 year ago

Finally 🤩 I admit I used to hide those… always looked of brand – super cool that you are bringing that upgrade 💫

Jasper Vermeulen1 year ago

True! Gives me a great focus state indication, love that i can customize it to look better in my application..

Dorian1 year ago

nice!

🔶 Atomic_.btc 🔸 🐧⚡1 year ago

Sweet

Related Videos

It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.

It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.

shadcn

667,681 views • 3 years ago

The new CLI and registry unlock advanced theming, including custom colors, animations, icons, dependencies, and even components With remote registry support, you can now give your apps a completely different look by running a simple command. Demo 📺

The new CLI and registry unlock advanced theming, including custom colors, animations, icons, dependencies, and even components With remote registry support, you can now give your apps a completely different look by running a simple command. Demo 📺

shadcn

94,295 views • 2 years ago

Developing components for shadcn/ui is still largely a manual process. Every week, I manually go through 5,000+ components and examples checking spacing, animation, light/dark mode, typography, icons, and more.

Developing components for shadcn/ui is still largely a manual process. Every week, I manually go through 5,000+ components and examples checking spacing, animation, light/dark mode, typography, icons, and more.

shadcn

131,848 views • 7 months ago

To get translucent menus right, we had to manually test components over different gradients & colors, checking visuals & accessibility. Now multiply that by 5 component types across 5 styles in both light and dark modes. It's a lot of work. Work that, for now, AI can't do.

To get translucent menus right, we had to manually test components over different gradients & colors, checking visuals & accessibility. Now multiply that by 5 component types across 5 styles in both light and dark modes. It's a lot of work. Work that, for now, AI can't do.

shadcn

92,478 views • 6 months ago

Today we're releasing a new set of components for building chat interfaces. We've taken the patterns we build every day, rethought the abstractions behind them, and turned them into components you can compose and customize. We're starting with the conversation layer: streaming, scrolling, messages, bubbles, attachments, and markers.

Today we're releasing a new set of components for building chat interfaces. We've taken the patterns we build every day, rethought the abstractions behind them, and turned them into components you can compose and customize. We're starting with the conversation layer: streaming, scrolling, messages, bubbles, attachments, and markers.

shadcn

956,653 views • 3 months ago

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

shadcn

532,260 views • 3 years ago

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.

shadcn

421,013 views • 3 years ago

Create a consistent look and feel across your Material Design app using Themes! 🎨 @khanhnwin shares how ↓

Create a consistent look and feel across your Material Design app using Themes! 🎨 @khanhnwin shares how ↓

Flutter

33,431 views • 2 years ago

Learn how to use Themes to create a consistent look and feel across your Material App in Flutter. ⬇️

Learn how to use Themes to create a consistent look and feel across your Material App in Flutter. ⬇️

Flutter

140,768 views • 1 year ago

Introducing v0 by Vercel - v0 generates custom components on the fly that you can copy and paste into your existing codebase. Need a component? Just Ask - Jared Palmer Mariana Castilho Guillermo Rauch Malte Ubl almonk and the team at Vercel

Introducing v0 by Vercel - v0 generates custom components on the fly that you can copy and paste into your existing codebase. Need a component? Just Ask - Jared Palmer Mariana Castilho Guillermo Rauch Malte Ubl almonk and the team at Vercel

shadcn

737,453 views • 3 years ago

Announcing Monorepo Support for the shadcn CLI We’ve made it easier to use shadcn/ui in monorepos. The CLI now understands your workspaces, installs components and dependencies in the right packages, and handles import resolution for you.

Announcing Monorepo Support for the shadcn CLI We’ve made it easier to use shadcn/ui in monorepos. The CLI now understands your workspaces, installs components and dependencies in the right packages, and handles import resolution for you.

shadcn

73,839 views • 1 year ago

Introducing our free Figma Kit for Nuxt UI V3 ✨ • Over 40 fully customizable components with props and slots • Local variables for colors, typography, and effects • Consistent shadow and border-radius system And much more! Made by Moriceau sarah 💚

Introducing our free Figma Kit for Nuxt UI V3 ✨ • Over 40 fully customizable components with props and slots • Local variables for colors, typography, and effects • Consistent shadow and border-radius system And much more! Made by Moriceau sarah 💚

Nuxt

17,564 views • 1 year ago

The Ola Electric team has ramped up focus on customer centricity and service! Great to see happy customers across the country. Scaling Hyperservice across the country by adding technicians and shipping parts faster. Our service soon will be better than all others!

The Ola Electric team has ramped up focus on customer centricity and service! Great to see happy customers across the country. Scaling Hyperservice across the country by adding technicians and shipping parts faster. Our service soon will be better than all others!

Bhavish Aggarwal

411,281 views • 6 months ago

The new Open in v0 lets you take your components to v0 for prompting. My new workflow is component to v0 to editor. You can try it now on

The new Open in v0 lets you take your components to v0 for prompting. My new workflow is component to v0 to editor. You can try it now on

shadcn

173,352 views • 2 years ago

Stop spending hours making your website responsive. Start with your desktop breakpoint and ask the Framer Agent to handle the rest, adjusting layouts, spacing, and components across every screen size.

Stop spending hours making your website responsive. Start with your desktop breakpoint and ask the Framer Agent to handle the rest, adjusting layouts, spacing, and components across every screen size.

Framer

12,020 views • 26 days ago

Stay consistent, persevere, and know what to focus on, and what to ignore.

Stay consistent, persevere, and know what to focus on, and what to ignore.

Loveena🕉️

41,760 views • 6 months ago

Do all shadcn/ui apps look the same? No. They don't have to. Think of shadcn/ui as a coloring template - it provides the outlines & structure. Black & white. A starting point. You get to fill it with your own unique colors and styles. And it's really easy. Here's an example:

Do all shadcn/ui apps look the same? No. They don't have to. Think of shadcn/ui as a coloring template - it provides the outlines & structure. Black & white. A starting point. You get to fill it with your own unique colors and styles. And it's really easy. Here's an example:

shadcn

392,772 views • 1 year ago

All 57 Super Bowl rings look even better on Sphere. 💍 #SBLVIII

All 57 Super Bowl rings look even better on Sphere. 💍 #SBLVIII

NFL

1,812,790 views • 2 years ago

these 3 Framer components will make your website look EXPENSIVE. comment “PREMIUM” and i'll send these and 3 more components for free. :)

these 3 Framer components will make your website look EXPENSIVE. comment “PREMIUM” and i'll send these and 3 more components for free. :)

Framer University

11,924 views • 1 year ago