Shadcn Create + Opus 4.5 / Gemini 3 Pro: This is THE BEST WAY to make BEAUTIFUL APPS with AI!

Streamlining UI Development with Shadcn’s New Styling System

Key Concepts:

• Shadcn/ui: A component/UI library offering pre-built, responsive, and interactive UI elements.
• Radix UI & Bass: Base component libraries selectable during Shadcn project setup.
• Vega, Nova, Maya, LRA, Mirror: Predefined style presets within the Shadcn create tool, dictating overall UI aesthetics.
• Tanstack & Vite: JavaScript build tools/frameworks used for project initialization.
• Verdant & Opus: Code editor and AI model respectively, used for demonstration.
• Work Trees: A feature in Verdant allowing for isolated project experimentation.
• Shadcn MCP Server: A server enabling access to and management of Shadcn components.

Introduction to Shadcn/ui and the Problem of UI Consistency

The video focuses on a recent update to Shadcn/ui, a popular open-source UI library boasting over 100,000 stars on GitHub. The presenter highlights that while Shadcn/ui provides excellent building blocks for UIs (forms, pricing pages, etc.), using components from multiple providers can lead to visual inconsistencies. Previously, customization required manual code adjustments or expensive solutions like V0. The core issue is maintaining a unique and consistent style across a project when leveraging pre-built components. The presenter notes that using Shadcn with AI coders already saves tokens due to the concise code required for components.

The New Shadcn “Create” Tool: A Style Customization Solution

Shadcn has introduced a new “create” option on their website designed to address the UI consistency problem. This feature provides a builder-like interface allowing developers to define a consistent style for their entire application. The process involves several key steps:

1. Preset Selection: Choosing from pre-defined style presets like Vega (general look), Nova (less padding), Maya (borders & rounded corners), LRA (boxy shapes), and Mirror (combination of Maya & Lyra).
2. Base Component Library Selection: Selecting between Radix UI and Bass as the foundation for components. The presenter prefers Radix UI.
3. Style Configuration: Defining the overall look through options for base color (though custom color input is currently unavailable), theme (primary color), icon library (Lucid, Tabler, Huge Icons – Lucid is preferred), font (Inter, Noto Sans, Jetbrains Mono), and radius (corner rounding).
4. Shuffle Option: A randomization feature to explore different style combinations.
5. Project Initialization: Using a command-line instruction to initialize a new project with the defined style, supporting frameworks like Next.js, Tanstack, and Vite. Next.js is recommended for easier deployment.

Demonstration: Building a Chat App and To-Do List with Consistent Styling

The presenter demonstrates the new system by initializing a Next.js project with a customized style. They then utilize Verdant (a code editor with work tree support) and Opus (an AI model) to build two separate applications – a chat app and a to-do list – within the same project.

• Work Trees: The presenter emphasizes the use of Verdant’s work tree feature to create isolated branches for experimentation, ensuring the main project remains untouched.
• AI-Assisted Development: The presenter prompts Opus to build the chat app and to-do list, specifically requesting the use of Shadcn/ui components. The AI successfully generates both applications, adhering to the pre-defined style.
• Consistent Visuals: The resulting chat app and to-do list exhibit a consistent visual style, demonstrating the effectiveness of the new Shadcn “create” tool. The presenter highlights that the AI doesn’t need to be prompted about design details, as it automatically leverages the established style.

Benefits and Future Possibilities

The presenter emphasizes several benefits of this new system:

• Faster Development: Reduced time spent on styling and component creation.
• UI Consistency: Ensured visual harmony across the entire application.
• Improved AI Integration: Streamlined AI-assisted development by eliminating the need for detailed design instructions.
• Light & Dark Theme Support: Shadcn components inherently support both light and dark themes.

The presenter also suggests potential future enhancements:

• Custom Color Input: Adding the ability to define custom colors beyond the pre-defined options.
• Shadcn Sub-Agent: Creating a dedicated AI agent to write custom components that adhere to the established aesthetic.
• Integration with Third-Party Registries: Extending the styling system to encompass components from other registries like Animate UI, ensuring consistent styling across all elements. The presenter notes they will test this functionality and share their findings.
• Rule-Based Component Enforcement: Configuring Verdant to automatically prioritize Shadcn/ui components.

Conclusion

The Shadcn/ui “create” tool represents a significant improvement in UI development workflow. By providing a centralized and streamlined approach to style customization, it empowers developers to build unique, responsive, and visually consistent applications more efficiently, particularly when combined with AI coding assistants. The presenter concludes that this update solves a major pain point in front-end development and will be a valuable asset for future projects.

Notable Quote:

“It is shad CN so it works with both light and dark themes and it’s just better. It is also very quick when you’re coding with AI because it doesn’t have to write the components, styles, etc. which makes it really, really cool.” – The presenter, emphasizing the benefits of the new system.