正在加载视频...

视频加载失败

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

I have released my first custom shadcn component as open source. 🎉 You can directly download it to your Next.js project using shadcn cli. ✨

Aykut

4,829 subscribers

78,803 次观看 • 2 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

You can now build translucent dropdown menus, selects, and comboboxes on shadcn/create. Mix in your custom styles, icons, fonts, and radii and build something different. Your own preset. All it takes is a few clicks.

You can now build translucent dropdown menus, selects, and comboboxes on shadcn/create. Mix in your custom styles, icons, fonts, and radii and build something different. Your own preset. All it takes is a few clicks.

shadcn

153,879 次观看 • 6 个月前

You can now make your own shadcn/ui and use it in v0. Create it on open it in v0, and use it as the foundation for your app.

You can now make your own shadcn/ui and use it in v0. Create it on open it in v0, and use it as the foundation for your app.

v0

56,019 次观看 • 9 个月前

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.

Dillion

90,073 次观看 • 2 年前

Calendar app coming to shadcn ui kit 🎉. I continue to work on it. See you soon 🫡.

Calendar app coming to shadcn ui kit 🎉. I continue to work on it. See you soon 🫡.

Toby

131,588 次观看 • 1 年前

New component: Questionnaire. Use it to build multi-step question flows, like agents asking follow-up questions. Supports single and multiple choice, freeform answers, skippable and conditional steps, controlled and resumable state, custom progress, bring-your-own validation, full keyboard navigation with answer shortcuts, ssr-ready, accessible and composable. Available for Base UI, Radix, React Aria in all styles. Also available as unstyled headless in shadcn/react.

New component: Questionnaire. Use it to build multi-step question flows, like agents asking follow-up questions. Supports single and multiple choice, freeform answers, skippable and conditional steps, controlled and resumable state, custom progress, bring-your-own validation, full keyboard navigation with answer shortcuts, ssr-ready, accessible and composable. Available for Base UI, Radix, React Aria in all styles. Also available as unstyled headless in shadcn/react.

shadcn

276,292 次观看 • 1 个月前

Introducing shadcn/typeset. You know how you render markdown and get back plain, unstyled HTML? Headings, paragraphs, lists, tables. So you style the elements one by one: font sizes, line heights, spacing. You do it for your blog. Then you do it again for docs. Then again for the chat. Every time, you're fighting the same thing: sizing and spacing. To fix this, we created typeset.css: one file that styles everything inside a typeset container. It lives in your project, so you can change it directly when you need to. And we made it work beautifully with streaming markdown.

Introducing shadcn/typeset. You know how you render markdown and get back plain, unstyled HTML? Headings, paragraphs, lists, tables. So you style the elements one by one: font sizes, line heights, spacing. You do it for your blog. Then you do it again for docs. Then again for the chat. Every time, you're fighting the same thing: sizing and spacing. To fix this, we created typeset.css: one file that styles everything inside a typeset container. It lives in your project, so you can change it directly when you need to. And we made it work beautifully with streaming markdown.

shadcn

551,679 次观看 • 2 个月前

React Native now has its own shadcn/ui equivalent — introducing 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜. If you love the flexibility of copying customisable components directly into your project (avoiding heavy, dependency-laden packages), NativeUI is designed for you. 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜 offers beautifully crafted, accessible components tailored for React Native, following the same copy-paste philosophy as shadcn/ui. Built with 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 for fast, declarative, and flexible styling optimised for React Native. ➡️ 𝗖𝗼𝗽𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗰𝗼𝗱𝗲 𝗱𝗶𝗿𝗲𝗰𝘁𝗹𝘆 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 — no black-box dependencies required. ➡️ 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗿𝗲 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝗯𝘆 𝗱𝗲𝗳𝗮𝘂𝗹𝘁, supporting screen readers and keyboard navigation, and designed to align with native iOS and Android UX patterns. ➡️ 𝗙𝘂𝗹𝗹 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 𝗼𝘃𝗲𝗿 𝘆𝗼𝘂𝗿 𝗨𝗜 without rebuilding common elements like buttons, inputs, or sliders from scratch. ➡️ 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗹𝗲 𝘄𝗶𝘁𝗵 𝗘𝘅𝗽𝗼 𝗮𝗻𝗱 𝘃𝗮𝗻𝗶𝗹𝗹𝗮 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗽𝗿𝗼𝗷𝗲𝗰𝘁𝘀, but not yet integrated with Tamagui’s styling system (future support may be planned). ➡️ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁𝘀 𝘁𝗵𝗲𝗺𝗶𝗻𝗴 𝘃𝗶𝗮 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 — though you’ll need to wire it up manually using Tailwind variables, context providers, and config files. Note: The term “install” in the documentation refers to using the shadcn CLI (e.g., npx shadcn@latest add component) to fetch and copy component code into your project, not adding a package to your dependencies. NativeUI isn’t a plug-and-play library; it’s a lightweight toolbox that empowers you to shape your UI with precision and control. 𝗪𝗵𝗮𝘁’𝘀 𝘆𝗼𝘂𝗿 𝗽𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲: npm install a pre-built UI kit for speed, or copy/paste NativeUI components for ultimate customisation? #ReactNative #KeyboardUX #MobileDev #OpenSource #JSDev #Performance #iOSDev #KeyboardExtensions #ReactNativeKeyboard #UIUX #shadcn #nativeui

React Native now has its own shadcn/ui equivalent — introducing 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜. If you love the flexibility of copying customisable components directly into your project (avoiding heavy, dependency-laden packages), NativeUI is designed for you. 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜 offers beautifully crafted, accessible components tailored for React Native, following the same copy-paste philosophy as shadcn/ui. Built with 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 for fast, declarative, and flexible styling optimised for React Native. ➡️ 𝗖𝗼𝗽𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗰𝗼𝗱𝗲 𝗱𝗶𝗿𝗲𝗰𝘁𝗹𝘆 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 — no black-box dependencies required. ➡️ 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗿𝗲 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝗯𝘆 𝗱𝗲𝗳𝗮𝘂𝗹𝘁, supporting screen readers and keyboard navigation, and designed to align with native iOS and Android UX patterns. ➡️ 𝗙𝘂𝗹𝗹 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 𝗼𝘃𝗲𝗿 𝘆𝗼𝘂𝗿 𝗨𝗜 without rebuilding common elements like buttons, inputs, or sliders from scratch. ➡️ 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗹𝗲 𝘄𝗶𝘁𝗵 𝗘𝘅𝗽𝗼 𝗮𝗻𝗱 𝘃𝗮𝗻𝗶𝗹𝗹𝗮 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗽𝗿𝗼𝗷𝗲𝗰𝘁𝘀, but not yet integrated with Tamagui’s styling system (future support may be planned). ➡️ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁𝘀 𝘁𝗵𝗲𝗺𝗶𝗻𝗴 𝘃𝗶𝗮 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 — though you’ll need to wire it up manually using Tailwind variables, context providers, and config files. Note: The term “install” in the documentation refers to using the shadcn CLI (e.g., npx shadcn@latest add component) to fetch and copy component code into your project, not adding a package to your dependencies. NativeUI isn’t a plug-and-play library; it’s a lightweight toolbox that empowers you to shape your UI with precision and control. 𝗪𝗵𝗮𝘁’𝘀 𝘆𝗼𝘂𝗿 𝗽𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲: npm install a pre-built UI kit for speed, or copy/paste NativeUI components for ultimate customisation? #ReactNative #KeyboardUX #MobileDev #OpenSource #JSDev #Performance #iOSDev #KeyboardExtensions #ReactNativeKeyboard #UIUX #shadcn #nativeui

The React Native Rewind

118,542 次观看 • 1 年前

How I use v0 for UI development ⬇️ Exploration: I rely on v0 a lot for exploration. If you have an idea you want to visualize, type in your prompt & let v0 transforms it into components. For the 1st generation, I always want v0 to be creative. I use the Quality ✨ toggle.

How I use v0 for UI development ⬇️ Exploration: I rely on v0 a lot for exploration. If you have an idea you want to visualize, type in your prompt & let v0 transforms it into components. For the 1st generation, I always want v0 to be creative. I use the Quality ✨ toggle.

shadcn

139,169 次观看 • 2 年前

When you're working on a new app, it can takes a few tries to find something you like so we've made switching presets really easy. Run init --preset with a new code in your app, and the cli will take care of reconfiguring everything including components, theme & dependencies.

When you're working on a new app, it can takes a few tries to find something you like so we've made switching presets really easy. Run init --preset with a new code in your app, and the cli will take care of reconfiguring everything including components, theme & dependencies.

shadcn

36,616 次观看 • 6 个月前

🚨🚨 Huge! Now you can build your own Agent trained on custom data with Then your Agent can be shipped on your website or on your existing customer support tool 👌 Databerry is open source! Awesome tech under the hood ❤️ Qdrant OpenAI Next.js

🚨🚨 Huge! Now you can build your own Agent trained on custom data with Then your Agent can be shipped on your website or on your existing customer support tool 👌 Databerry is open source! Awesome tech under the hood ❤️ Qdrant OpenAI Next.js

Georges Petrov

176,500 次观看 • 3 年前

You can now understand any codebase instantly with this free tool. It's called Understand Anything. It scans your entire project and builds an interactive visual map of every file, function, class, and dependency. Click anything. Search anything. Ask questions about it directly. Works with Claude Code, Codex, Cursor, Copilot, and Gemini CLI. One command to install. 100% Free. Open Source.

You can now understand any codebase instantly with this free tool. It's called Understand Anything. It scans your entire project and builds an interactive visual map of every file, function, class, and dependency. Click anything. Search anything. Ask questions about it directly. Works with Claude Code, Codex, Cursor, Copilot, and Gemini CLI. One command to install. 100% Free. Open Source.

Simplifying AI

22,410 次观看 • 2 个月前

As promised, Godot the robot is out, free and open-source! You can find Godot, Sophia, and more in this repository: Just copy the files to your projects to start using it.

As promised, Godot the robot is out, free and open-source! You can find Godot, Sophia, and more in this repository: Just copy the files to your projects to start using it.

GDQuest

108,234 次观看 • 3 年前

I don't know what a vestaboard is here's a component that flips characters - Pass in an array of messages / a single message to display - Import via shadcn CLI or Open in v0 - Light and dark mode - Mobile responsive Built with Claude Opus 4.6 High + Composer 2 in around an hour, 40 minutes out of which were spent on detailing of individual box and their colors

I don't know what a vestaboard is here's a component that flips characters - Pass in an array of messages / a single message to display - Import via shadcn CLI or Open in v0 - Light and dark mode - Mobile responsive Built with Claude Opus 4.6 High + Composer 2 in around an hour, 40 minutes out of which were spent on detailing of individual box and their colors

Manu Arora

32,300 次观看 • 5 个月前

Working on a new Command Menu to surface more context where you need it: - Colors in all formats. Enter to copy oklch or cmd+c for other format - Shortcut to copy cli command for components - Remembers your color format & package manager Small UX wins. Huge impact for docs.

Working on a new Command Menu to surface more context where you need it: - Colors in all formats. Enter to copy oklch or cmd+c for other format - Shortcut to copy cli command for components - Remembers your color format & package manager Small UX wins. Huge impact for docs.

shadcn

54,212 次观看 • 1 年前

custom desktop set for MossyMouse I really enjoyed working on this little project. First time eved made custom icons for programs If you want you can download free background in Wallpaper engine link in comments 👇

custom desktop set for MossyMouse I really enjoyed working on this little project. First time eved made custom icons for programs If you want you can download free background in Wallpaper engine link in comments 👇

dubs0354 ☕

11,181 次观看 • 3 个月前

Did you know you can record the #threejs canvas directly using MediaRecorder API in 60fps? Try it out, it will also open your mobile device's share tray and let you save the video directly! Live: Code:

Did you know you can record the #threejs canvas directly using MediaRecorder API in 60fps? Try it out, it will also open your mobile device's share tray and let you save the video directly! Live: Code:

Faraz

17,880 次观看 • 1 年前

You can now run open-source AI coding agents without paying for API keys 🤯 Cline CLI 2.0 just dropped with free access to Minimax M2.5. → Runs from your terminal → Parallel agents → Works with any editor Any model you want. 100% Open Source.

You can now run open-source AI coding agents without paying for API keys 🤯 Cline CLI 2.0 just dropped with free access to Minimax M2.5. → Runs from your terminal → Parallel agents → Works with any editor Any model you want. 100% Open Source.

Alvaro Cintas

162,119 次观看 • 7 个月前