PrimeVue offers the richest data components in Vue 3: DataTable, Tree, and OrganizationChart work out of the box, and the Aura theme preset pairs emerald (#10B981) with a slate gray scale. Six-pixel radii, subtle shadows, and 1px surface borders keep it modern, while the theme designer supports both unstyled and pass-through customization modes. Made for data-dense Vue admin systems.
PrimeVueFramework
Prompt Template
Base Template
Design a PrimeVue-inspired interface. - Vue 3 components with the Aura theme preset; - Emerald #10B981 primary over a slate gray scale; - 6px radii, subtle shadows, 1px surface borders; - Rich data components: DataTable, Tree, OrganizationChart; - Theme designer with unstyled and pass-through modes. Colors: #10B981, #F8FAFC, #1E293B, #64748B with #10B981 accent. Typography: Inter.
Variant Prompts
📱 Mobile
Design a mobile app with PrimeVue aesthetics. Use PrimeVue color identity with #10B981 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with PrimeVue style. Use PrimeVue color identity with #10B981 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with PrimeVue design language. Use PrimeVue color identity with #10B981 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with PrimeVue visual identity. Use PrimeVue color identity with #10B981 accents. Compelling, conversion-focused.
Usage Examples
PrimeVue DataTable Dashboard
DashboardBuild a data dashboard with PrimeVue style: DataTable with sorting and filters, stat panels, and #10B981 accent color.
PrimeVue Enterprise Admin
WebCreate an enterprise admin with PrimeVue design language: tree navigation, organization chart, and Aura theme surfaces.
✅ Best For
- Vue 3
- Data-heavy apps
- Enterprise dashboards
❌ Avoid For
- React tech stack projects
- Lightweight minimal-visual sites
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.