Base UI is the next-generation unstyled library from the MUI team, designed to pair with Tailwind CSS: components ship with zero CSS opinions, TypeScript covers the API end to end, and patterns like popup, select, slider, and tabs come as both hooks and components with WCAG 2.1 accessibility out of the box. Built for React teams that want an enterprise-grade base with total styling control.
ReactDeveloper
Prompt Template
Base Template
Design a Base UI-inspired interface. - Unstyled headless components with zero CSS opinions — full Tailwind integration; - Built by MUI (Material UI) team with enterprise-grade quality; - TypeScript-first with complete type safety; - Hooks and components for common patterns: popup, select, slider, tabs; - WCAG 2.1 accessibility compliance out of the box. Colors: #007FFF, #10B981, #F59E0B, #EF4444 with #007FFF accent. Typography: system-ui.
Variant Prompts
📱 Mobile
Design a mobile app with Base UI aesthetics. Use Base UI color identity with #007FFF accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Base UI style. Use Base UI color identity with #007FFF accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Base UI design language. Use Base UI color identity with #007FFF accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Base UI visual identity. Use Base UI color identity with #007FFF accents. Compelling, conversion-focused.
Usage Examples
Base UI Form Builder
WebBuild a form builder with Base UI design language, unstyled inputs, and #007FFF color system.
Base UI Dashboard
DashboardCreate a dashboard using Base UI style with headless select, slider, and tabs components.
✅ Best For
- Framework
- Design system foundation
- Custom design systems
❌ Avoid For
- Teams wanting out-of-the-box styled components
- Non-React ecosystem projects
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.