Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

damianricobelli's profile picture

Damián Ricobelli

1,027 subscribers

48,295 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Damián Ricobelli profil fotoğrafı
Damián Ricobelli2 yıl önce

Website: GitHub repo:

Paul 🚧 profil fotoğrafı
Paul 🚧2 yıl önce

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

Damián Ricobelli profil fotoğrafı
Damián Ricobelli2 yıl önce

@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 profil fotoğrafı
Francis Baker2 yıl önce

@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 profil fotoğrafı
Damián Ricobelli2 yıl önce

@shadcn Thank you very much, Francis ❤️

Abdulhamit Akaslan profil fotoğrafı
Abdulhamit Akaslan2 yıl önce

@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 profil fotoğrafı
Damián Ricobelli2 yıl önce

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

Mohammad Alnahhas profil fotoğrafı
Mohammad Alnahhas2 yıl önce

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

Damián Ricobelli profil fotoğrafı
Damián Ricobelli2 yıl önce

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

Jidé ✨ profil fotoğrafı
Jidé ✨2 yıl önce

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

Damián Ricobelli profil fotoğrafı
Damián Ricobelli2 yıl önce

@shadcn Thank you 🙏

Benzer Videolar

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 4 ay önce

🎛️ 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 görüntüleme • 6 ay önce

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 görüntüleme • 2 yıl önce

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,552 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 1 yıl önce

.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 görüntüleme • 9 ay önce

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 görüntüleme • 7 ay önce

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

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

shadcn

260,487 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce