正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Made a Phone Input component with shadcn ui and libphonenumber-js

Damián Ricobelli

1,027 subscribers

48,295 次观看 • 2 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 条评论

Damián Ricobelli 的头像

Damián Ricobelli2 年前

Website: GitHub repo:

Paul 🚧 的头像

Paul 🚧2 年前

@shadcn Did you take into account, that Windows doesn't support flag emojis?

Damián Ricobelli 的头像

Damián Ricobelli2 年前

@paul_koeck @shadcn Yes! For a first version, I didn’t want to dwell on it too much. Another way to solve it can be with svg for each country, but I have to investigate a little more.

Francis Baker 的头像

Francis Baker2 年前

@shadcn You’ve been cranking out some amazing components lately. The stepper is one of my favorites, and using that in an app.

Damián Ricobelli 的头像

Damián Ricobelli2 年前

@shadcn Thank you very much, Francis ❤️

Abdulhamit Akaslan 的头像

Abdulhamit Akaslan2 年前

@shadcn Nice job! I just find a weird bug on "Ctrl" + "Z" to revert last char. It keeps copy-paste whole input. Also "Ctrl" + "A" and "Delete" not working properly too.

Damián Ricobelli 的头像

Damián Ricobelli2 年前

@shadcn Thank you for discovering it! I will try to make the fix between today and tomorrow.

Mohammad Alnahhas 的头像

Mohammad Alnahhas2 年前

@shadcn Looks very neat! One minor issue I discovered is searching with the country code does not work properly.

Damián Ricobelli 的头像

Damián Ricobelli2 年前

@shadcn Hey! Could you create an issue in the GitHub repo?

Jidé ✨ 的头像

Jidé ✨2 年前

@shadcn Added your component to my shadcn/ui additional components and resources post

Damián Ricobelli 的头像

Damián Ricobelli2 年前

@shadcn Thank you 🙏

相关视频

Address autocomplete component made with shadcn ui and google places api...

Address autocomplete component made with shadcn ui and google places api...

Niaz Morshed

130,080 次观看 • 2 年前

the Shadcn UI component explorer just got a huge upgrade:

the Shadcn UI component explorer just got a huge upgrade:

Dan ⚡️

68,000 次观看 • 1 年前

Introducing ! 🤩🎉 Open Source alternative v0! Generate usable Vue component, not just UI. Support `shadcn/vue` for now, but will address more library in soon! Fork it, Host it, Star it ⭐️ --- Made with Nuxt Drizzle ORM shadcn UI

Introducing ! 🤩🎉 Open Source alternative v0! Generate usable Vue component, not just UI. Support `shadcn/vue` for now, but will address more library in soon! Fork it, Host it, Star it ⭐️ --- Made with Nuxt Drizzle ORM shadcn UI

Zernonia

295,914 次观看 • 2 年前

We’ve brought shadcn/create into our Figma toolkit. With our Figma to shadcn/ui plugin, you can tailor the component library just like you do in shadcn/create - directly in Figma. Adjust base and theme colors, radii, fonts, and icon sets in seconds.

We’ve brought shadcn/create into our Figma toolkit. With our Figma to shadcn/ui plugin, you can tailor the component library just like you do in shadcn/create - directly in Figma. Adjust base and theme colors, radii, fonts, and icon sets in seconds.

Matt

10,553 次观看 • 4 个月前

made a composable file uploader with shadcn ui. added a Theo - t3.gg uploadthing example with progress tracking.

made a composable file uploader with shadcn ui. added a Theo - t3.gg uploadthing example with progress tracking.

sadman

35,169 次观看 • 1 年前

Just dropped a new open-source layout 🔥 Built with shadcn/ui and Origin UI!

Just dropped a new open-source layout 🔥 Built with shadcn/ui and Origin UI!

Pasquale Vitiello

71,871 次观看 • 1 年前

🎛️ Shadcn Combobox! A fast, searchable combobox component with 12 variants - perfect for lookups, filters, pickers, and multi-select inputs. 💎 Types: 🔍 Typeahead search 🧩 Single & multi-select 👤 Avatar & icon options #shadcn #ui #react #tailwind #buildinpublic

Shadcn Studio

20,783 次观看 • 6 个月前

Made a copy of the monthly calendar used by Cal.com with shadcn UI, Radix by WorkOS Colors and React Aria

Made a copy of the monthly calendar used by Cal.com with shadcn UI, Radix by WorkOS Colors and React Aria

Damián Ricobelli

54,160 次观看 • 2 年前

Introducing shadcn/create – Build your own shadcn/ui Customize Everything. Pick your component library, icons, base color, theme, fonts and build something that doesn’t look like everything else. Now available for Next.js, Vite, TanStack Start and v0.

Introducing shadcn/create – Build your own shadcn/ui Customize Everything. Pick your component library, icons, base color, theme, fonts and build something that doesn’t look like everything else. Now available for Next.js, Vite, TanStack Start and v0.

shadcn

1,127,781 次观看 • 6 个月前

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

shadcn

52,962 次观看 • 1 年前

The wait is over, Guys! 😌 Finally, we've shipped Shadcn Studio 🎉 An open-source registry with copy-and-paste components, blocks, and templates! - Paired with a powerful theme editor to craft, customize, and ship faster. 🚀 - Shadcn Theme Editor & Component variants ✅ - Theme Import/Export ✅ - Save Shadcn Themes ✅ - Shadcn Component Variants ⌛ - Shadcn Figma UI Kit ⌛ - Shadcn Blocks & Templates ⌛ - Figma Plugin, AI, MCP, LLM and more.. ⌛ ➡️ Check it out here: Huge thanks to Anand Patel, Heet Bhalodiya & Aayush Makwana for their incredible work on this! 🙌 Special thanks to shadcn Sahaj 🫱🏼‍🫲🏼 We’d love to hear your thoughts and feedback from the community! Let us know what you think. 😀

The wait is over, Guys! 😌 Finally, we've shipped Shadcn Studio 🎉 An open-source registry with copy-and-paste components, blocks, and templates! - Paired with a powerful theme editor to craft, customize, and ship faster. 🚀 - Shadcn Theme Editor & Component variants ✅ - Theme Import/Export ✅ - Save Shadcn Themes ✅ - Shadcn Component Variants ⌛ - Shadcn Figma UI Kit ⌛ - Shadcn Blocks & Templates ⌛ - Figma Plugin, AI, MCP, LLM and more.. ⌛ ➡️ Check it out here: Huge thanks to Anand Patel, Heet Bhalodiya & Aayush Makwana for their incredible work on this! 🙌 Special thanks to shadcn Sahaj 🫱🏼‍🫲🏼 We’d love to hear your thoughts and feedback from the community! Let us know what you think. 😀

Ajay Patel

85,887 次观看 • 1 年前

Introducing Evilcharts An open-source chart UI website built with shadcn/ui and recharts, beautifully designed and handcrafted.

Introducing Evilcharts An open-source chart UI website built with shadcn/ui and recharts, beautifully designed and handcrafted.

Gurbinder

76,420 次观看 • 2 个月前

Building an AI Agent Web App: Framework - Next.js Auth & Db - Supabase Agent Flows - Langflow IDE - Cursor (+Claude 3.5) Component lib - shadcn UI UI - v0 Full tutorial below:

Building an AI Agent Web App: Framework - Next.js Auth & Db - Supabase Agent Flows - Langflow IDE - Cursor (+Claude 3.5) Component lib - shadcn UI UI - v0 Full tutorial below:

Misbah Syed

132,104 次观看 • 1 年前

After months of hard work, it's here! 🚀 The NEW shadcn/ui kit for Figma, based on Tailwind v4 and shadcn 2.5.0! What's new? ⭐ Updated Figma kit ⭐ Refactored Pro Blocks for Tailwind v4 ⭐ 28 new Pro Blocks ⭐ Added new AI models to our plugin for improved component generation ⭐ New feature: Export Figma themes via our plugin and install them with shadcn/ui registry

After months of hard work, it's here! 🚀 The NEW shadcn/ui kit for Figma, based on Tailwind v4 and shadcn 2.5.0! What's new? ⭐ Updated Figma kit ⭐ Refactored Pro Blocks for Tailwind v4 ⭐ 28 new Pro Blocks ⭐ Added new AI models to our plugin for improved component generation ⭐ New feature: Export Figma themes via our plugin and install them with shadcn/ui registry

Matt

26,730 次观看 • 1 年前

.shadcn is different from most component libraries...because it is NOT a component library.

.shadcn is different from most component libraries...because it is NOT a component library.

Laracasts

17,400 次观看 • 9 个月前

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

Suraj Jha

48,365 次观看 • 7 个月前

React Elastic Slider component - Inspired by the Slider in DialKit (joshpuckett) - Built while learning from the “Creating a Slider Component” lesson in Interface Craft (joshpuckett) Install with shadcn CLI: npx shadcn add @ncdai/elastic-slider

React Elastic Slider component - Inspired by the Slider in DialKit (joshpuckett) - Built while learning from the “Creating a Slider Component” lesson in Interface Craft (joshpuckett) Install with shadcn CLI: npx shadcn add @ncdai/elastic-slider

Chánh Đại

15,137 次观看 • 2 个月前

Sora (.com) is built using shadcn/ui 😎

Sora (.com) is built using shadcn/ui 😎

shadcn

260,487 次观看 • 1 年前

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,448 次观看 • 1 年前