Introduction: UI Libraries Historical Impact

• UI libraries essential to web progress and front-end experiences
• Bootstrap, Material UI enabled prolific good applications (Twitter, YouTube)
• Most developers build with component libraries
• Thesis: UI libraries are dying, future looks different

ShadCN/UI Revolutionary Approach

• Created by Shaden (prolific open source contributor, Vercel team member)
• Not traditional UI library - provides pieces to build perfect UI library for yourself
• "Build your component library" philosophy
• Installs components as actual editable code in codebase vs npm packages
• Two installation methods:
  • Manual copy-paste from documentation
  • CLI command (recently added)

Live ShadCN Demo

• Demonstrated accordion component installation
• Configuration setup: Tailwind config, aliases, file paths
• CLI command: bun add accordion (or similar)
• Generated accordion.tsx file in local codebase
• Built on Radix UI for accessibility
• Full ownership of code - can edit/customize freely
• Easy addition of new components: collapsible, combo box, data table, hover card

V0 by Vercel: AI-Generated Components

• New Vercel project generating ShadCN-based components with AI
• Demo: video player with comment section generation
• Multiple UI variations generated automatically
• Iterative refinement through natural language requests:
  • Move comments to right sidebar
  • Make sidebar scrollable
  • Add title section below video
  • Extend sidebar to full height
• Generates React source code and HTML
• Copy command installs generated component directly into codebase

Technical Foundation

• Package dependencies minimal:
  • Radix helpers for accessible React code
  • Class Variance Authority, clsx for class name management
  • Tailwind merge and animate for styling
• Significantly lowers barrier for UI library creation
• As accessible as adopting Material UI or Bootstrap
• Tailwind as base assembly layer

Tailwind UI Comparison

• Similar approach: copy-paste component model
• Provides buttons, comment sections, audio players, etc.
• Free components available, paid tier:
  • $300 individual license (one-time)
  • $800 team license (one-time)
• React code generation for interactive components
• Mobile-responsive components included

Underlying Technologies

Radix UI

• Powerful set of accessible React application primitives
• Provides hooks and components for accessibility
• Base components enable quick accessible UI development
• Handles complex states, race conditions, edge cases

Headless UI

• Tailwind team's equivalent to Radix
• Components, hooks, behaviors for correct rendering
• Focus on accessibility and component architecture

Industry Implications

• Accessibility traditionally difficult to implement correctly
• Component architecture complexity
• Previous solutions required reinventing same work repeatedly
• Material UI limitations: jarring differences between library and custom components
• New approach: blurred line between library and owned code
• Maintains library agility with full ownership

Future Predictions

• Component libraries as npm packages dying
• Future: scripts generating best component library for specific applications
• No compromise on flexibility for user-specific UI needs
• Vercel hiring Shaden signals industry bet on this direction
• Transition happening aggressively with high developer adoption