Matt

@matsugfx • 7,641 subscribers

Design Engineer specialising in Design Systems | https://t.co/YYsv1LnOm8

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Introducing shadcn/ui Design System Manager. A visual editor for shadcn design systems. Add a token, a variant, or ask the agent to match your design.md. Every component on the canvas updates instantly. Share preview with your client or Publish as a registry. Let me show you..

Introducing shadcn/ui Design System Manager. A visual editor for shadcn design systems. Add a token, a variant, or ask the agent to match your design.md. Every component on the canvas updates instantly. Share preview with your client or Publish as a registry. Let me show you..

30,054 次观看 • 5 天前

My mind is blown. Today, I was testing the latest shadcn MCP with Figma MCP and our upcoming pro-blocks registry (CLI 3.0). It was able to create this simple landing page designed in Figma with Pro Blocks and custom styles in around 4 minutes.

My mind is blown. Today, I was testing the latest shadcn MCP with Figma MCP and our upcoming pro-blocks registry (CLI 3.0). It was able to create this simple landing page designed in Figma with Pro Blocks and custom styles in around 4 minutes.

182,609 次观看 • 1 年前

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

77,902 次观看 • 7 个月前

I was ready to tear my (remaining) hair out. Every shadcn UI kit for Figma I found on Figma Community was of poor quality, missing components or outdated. 😡 My client's deadline loomed, and I needed a solution fast... That's when inspiration struck. With my seven years of experience creating Figma resources and managing the Ant Design System, why not make the kit myself? 🤔 I dove in, pouring my expertise into every component. Days blended as I crafted, refined, and perfected. 🥵 Finally, I sat back and smiled. Before me was the high-quality, up-to-date Shadcn UI kit I'd been searching for, complete with customer support. 🤩 As I prepared to share it with the world, I felt a surge of excitement. This wasn't just a solution to my problem – it was a resource that could help thousands of other designers and developers. It’s not a dream. I made it.

I was ready to tear my (remaining) hair out. Every shadcn UI kit for Figma I found on Figma Community was of poor quality, missing components or outdated. 😡 My client's deadline loomed, and I needed a solution fast... That's when inspiration struck. With my seven years of experience creating Figma resources and managing the Ant Design System, why not make the kit myself? 🤔 I dove in, pouring my expertise into every component. Days blended as I crafted, refined, and perfected. 🥵 Finally, I sat back and smiled. Before me was the high-quality, up-to-date Shadcn UI kit I'd been searching for, complete with customer support. 🤩 As I prepared to share it with the world, I felt a surge of excitement. This wasn't just a solution to my problem – it was a resource that could help thousands of other designers and developers. It’s not a dream. I made it.

190,401 次观看 • 2 年前

I'm getting close to releasing Figma to shadcn plugin. The plugin will allow you to generate accurate, high-quality, and responsive shadcn/ui code based on your Figma designs 💪 Guillermo Rauch When will the v0 API be available? I would love to add "Open in v0" feature! 🙏

I'm getting close to releasing Figma to shadcn plugin. The plugin will allow you to generate accurate, high-quality, and responsive shadcn/ui code based on your Figma designs 💪 Guillermo Rauch When will the v0 API be available? I would love to add "Open in v0" feature! 🙏

123,035 次观看 • 1 年前

We're cooking a huge update for shadcndesign. 1. We'll bring the shadcn create feature into our plugin. It will allow you to quickly set up the theme for your Figma kit. 2. 5 icon libraries support in 1 Figma kit. Icon libraries that are available in shadcn/create will be available in our Figma kit. 3. Our plugin will be able to generate shadcn/ui code that will support the icon library you use. More details soon.

We're cooking a huge update for shadcndesign. 1. We'll bring the shadcn create feature into our plugin. It will allow you to quickly set up the theme for your Figma kit. 2. 5 icon libraries support in 1 Figma kit. Icon libraries that are available in shadcn/create will be available in our Figma kit. 3. Our plugin will be able to generate shadcn/ui code that will support the icon library you use. More details soon.

57,212 次观看 • 8 个月前

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!

44,889 次观看 • 11 个月前

My matsu-theme for shadcn is now live! I also started working on a dedicated Figma kit for this theme. Preview and install with CLI ⬇️

My matsu-theme for shadcn is now live! I also started working on a dedicated Figma kit for this theme. Preview and install with CLI ⬇️

56,971 次观看 • 1 年前

I've just updated our Figma to shadcn plugin with the new AI models: - Claude Opus 4.5 - Gemini Pro 3.0 Preview In the video below you can see how Opus one-shotted this simple dashboard. Incredible result. shadcndesign . com/plugin

I've just updated our Figma to shadcn plugin with the new AI models: - Claude Opus 4.5 - Gemini Pro 3.0 Preview In the video below you can see how Opus one-shotted this simple dashboard. Incredible result. shadcndesign . com/plugin

36,201 次观看 • 10 个月前

I've just created a @Figma plugin in 2 hours with Anthropic Claude 3.5 that creates synonyms for icons and adds them to the component's description for better icon finding. I have 0 backend experience, and there is some Vercel server stuff and API calls to AI API 🤯

I've just created a @Figma plugin in 2 hours with Anthropic Claude 3.5 that creates synonyms for icons and adds them to the component's description for better icon finding. I have 0 backend experience, and there is some Vercel server stuff and API calls to AI API 🤯

54,278 次观看 • 2 年前

Just shipped a big batch of 82 shadcn blocks to speed up your e‑commerce and landing page builds in our Figma kit and React. [1] 55 New E‑commerce Blocks: checkouts, incentives, order summaries, product headers/lists/filters, sale sections, carts, navbars, and examples.

Just shipped a big batch of 82 shadcn blocks to speed up your e‑commerce and landing page builds in our Figma kit and React. [1] 55 New E‑commerce Blocks: checkouts, incentives, order summaries, product headers/lists/filters, sale sections, carts, navbars, and examples.

19,259 次观看 • 9 个月前

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

26,730 次观看 • 1 年前

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.

10,553 次观看 • 8 个月前

The ShadcnDesign Academy is now available! 🚀 Master the Figma to shadcn process with our short, on-point video tutorials. Learn how to use our tools to accelerate your project development and deliver outstanding products faster.

The ShadcnDesign Academy is now available! 🚀 Master the Figma to shadcn process with our short, on-point video tutorials. Learn how to use our tools to accelerate your project development and deliver outstanding products faster.

15,469 次观看 • 1 年前

We are finalizing the shadcn/ui kit for Figma, based on the latest shadcn and Tailwind v4. Today, we are creating step-by-step guides in Figma to help beginners quickly start using the UI kit and its features. Following the guide will help you go through the entire process of customizing and using the UI kit to implementing your designs.

We are finalizing the shadcn/ui kit for Figma, based on the latest shadcn and Tailwind v4. Today, we are creating step-by-step guides in Figma to help beginners quickly start using the UI kit and its features. Following the guide will help you go through the entire process of customizing and using the UI kit to implementing your designs.

15,677 次观看 • 1 年前

没有更多内容可加载