Introduction

What is Pohon UI?

A modern Vue UI component library built on Akar, UnoCSS, and UnoCSS Variants to ship beautiful and accessible applications with 125+ production-ready components. Works with Nuxt and plain Vue apps (Vite, Inertia, SSR).

If you're building a Vue project with UnoCSS, Pohon UI is a great default choice. It provides high-level, ready-to-use components (data tables, forms, overlays, navigation) while still allowing advanced customization when needed.

Pohon UI is derived from Nuxt UI, ported from Tailwind CSS to UnoCSS and from Reka UI to Akar. If your project uses Tailwind CSS, use Nuxt UI directly, which works with both Nuxt and Vue. Credits go to @nuxt-ui for the original implementation.

Why Pohon UI?

We like the component design of Nuxt UI, but prefer UnoCSS for its flexibility. Since Nuxt UI relies heavily on Tailwind CSS, we created Pohon UI to bring that approach to UnoCSS.

Porting the components also gave us a deeper understanding of how they work. When an issue comes up, we can trace it to the relevant code and narrow the scope of the fix. This makes it easier to resolve issues ourselves or give an AI agent clear context for the task.

Pohon UI combines accessible Akar primitives, semantic UnoCSS utilities, and typed component variants. It supports Nuxt and Vue applications and can be customized through the theme configuration and CSS variables.

Core technologies

Pohon UI is built on three foundations: Akar for behavior and accessibility, UnoCSS for styling, and UnoCSS Variants for composing variants.

Akar

Pohon UI is built on top of Akar as a foundation for the components:

• WAI-ARIA Compliance: Follows WAI-ARIA authoring practices with proper semantics and roles
• Keyboard Navigation: Built-in keyboard support for complex components like tabs and dialogs
• Focus Management: Intelligent focus handling that moves focus based on user interactions
• Accessible Labels: Abstractions to simplify labeling controls for screen readers

UnoCSS

Pohon UI integrates UnoCSS, bringing significant improvements:

• Configurable Utilities: Customize generated utilities in uno.config.ts
• Modern Web Features: Container queries, cascade layers, wide-gamut colors, and more

UnoCSS Variants

Pohon UI takes advantage of UnoCSS Variants to provide a powerful design system:

• Dynamic Styling: Flexible component variants with a powerful API
• Type Safety: Full TypeScript support with auto-completion
• Conflict Resolution: We don't support this since we want to keep the responsibility of the cascading order to the developer. We want to avoid the complexity of merging conflicting styles and let the developer decide how to handle them.

Key features

Ecosystem integration

Pohon UI is SSR compatible and integrates seamlessly with the ecosystem:

Vue compatibility (Nuxt optional)

Pohon UI works with any Vue project, not just Nuxt. Simply add the Vite and Vue plugins to your configuration:

• Auto-imports: Components and composables are automatically imported and available globally
• Design System: Full theming support with customizable colors, sizes, variants, and more
• Developer Experience: Complete TypeScript support with IntelliSense and auto-completion

TypeScript Support

Pohon UI provides comprehensive TypeScript integration for a superior developer experience:

• Auto-completion: For all component props, slots, and events
• Generic Components: Using Vue Generics
• Type-safe Theming: In app.config.ts
• IntelliSense: Throughout your entire codebase

Working examples

The Nuxt playground and Vue playground show complete Pohon UI and UnoCSS configurations.

FAQ