Naive UI is the TypeScript-first Vue 3 component library known for programmable themes: default primary green (#18A058) with theme overrides rewritable at runtime, 3px radii, precise 1px borders, and 34px control heights for a compact, orderly feel. Composable APIs — n-data-table, n-form, n-config-provider — cover data-heavy scenarios over calm, zero-noise surfaces. Made for type-safe, theme-customized Vue admin work.
Naive UIFramework
Prompt Template
Base Template
Design a Naive UI-inspired interface. - Vue 3 + TypeScript-first component library; - Default primary #18A058 green with programmable theme overrides; - 3px radii, precise 1px borders, 34px default control height; - Composed APIs: n-data-table, n-form, n-config-provider; - Calm, work-focused surfaces with zero visual noise. Colors: #18A058, #2080F0, #FFFFFF, #333639 with #18A058 accent. Typography: system-ui.
Variant Prompts
📱 Mobile
Design a mobile app with Naive UI aesthetics. Use Naive UI color identity with #18A058 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Naive UI style. Use Naive UI color identity with #18A058 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Naive UI design language. Use Naive UI color identity with #18A058 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Naive UI visual identity. Use Naive UI color identity with #18A058 accents. Compelling, conversion-focused.
Usage Examples
Naive UI Data App
DashboardBuild a data app with Naive UI style: n-data-table, n-form validation, and #18A058 accent with programmable themes.
Naive UI Config Console
WebCreate a configuration console with Naive UI design language: settings forms, tooltips, and calm work-focused surfaces.
✅ Best For
- Vue 3
- TypeScript projects
- Themable admin apps
❌ Avoid For
- React projects
- Highly visually customized brand UIs
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.