Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

damianricobelli's profile picture

Damián Ricobelli

1,027 subscribers

48,295 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Damián Ricobelli
Damián Ricobellivor 2 Jahren

Website: GitHub repo:

Profilbild von Paul 🚧
Paul 🚧vor 2 Jahren

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

Profilbild von Damián Ricobelli
Damián Ricobellivor 2 Jahren

@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.

Profilbild von Francis Baker
Francis Bakervor 2 Jahren

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

Profilbild von Damián Ricobelli
Damián Ricobellivor 2 Jahren

@shadcn Thank you very much, Francis ❤️

Profilbild von Abdulhamit Akaslan
Abdulhamit Akaslanvor 2 Jahren

@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.

Profilbild von Damián Ricobelli
Damián Ricobellivor 2 Jahren

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

Profilbild von Mohammad Alnahhas
Mohammad Alnahhasvor 2 Jahren

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

Profilbild von Damián Ricobelli
Damián Ricobellivor 2 Jahren

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

Profilbild von Jidé ✨
Jidé ✨vor 2 Jahren

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

Profilbild von Damián Ricobelli
Damián Ricobellivor 2 Jahren

@shadcn Thank you 🙏

Ähnliche Videos

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

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

Niaz Morshed

130,080 Aufrufe • vor 1 Jahr

the Shadcn UI component explorer just got a huge upgrade:
0:32

the Shadcn UI component explorer just got a huge upgrade:

Dan ⚡️

68,000 Aufrufe • vor 1 Jahr

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
0:47

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 Aufrufe • vor 2 Jahren

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.
0:51

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 Aufrufe • vor 4 Monaten

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

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

sadman

35,169 Aufrufe • vor 1 Jahr

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.
0:29

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,425 Aufrufe • vor 6 Monaten

🎛️ 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
1:24

🎛️ 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 Aufrufe • vor 6 Monaten

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.
0:56

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 2 Jahren

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. 😀
1:42

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 Aufrufe • vor 1 Jahr

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

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

Gurbinder

76,420 Aufrufe • vor 1 Monat

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
2:27

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 Aufrufe • vor 1 Jahr

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

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

Laracasts

17,400 Aufrufe • vor 9 Monaten

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 ✨
0:26

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,354 Aufrufe • vor 7 Monaten

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

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

shadcn

260,487 Aufrufe • vor 1 Jahr

airtable and linear linear like filters, and sorting for TANSTACK table. built with shadcn ui.
0:25

airtable and linear linear like filters, and sorting for TANSTACK table. built with shadcn ui.

sadman

96,489 Aufrufe • vor 1 Jahr

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:
2:03

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 Aufrufe • vor 1 Jahr

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.
0:25

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,795 Aufrufe • vor 1 Jahr