Introduction

Pohon UI is a comprehensive UI library for Vue and Nuxt applications, offering a collection of fully styled and accessible components.

What is Pohon UI?

A modern UI library built on Akar, UnoCSS, and UnoCSS Variants to ship beautiful and accessible applications with 100+ production-ready components.

Developer Experience First

Intuitive APIs, excellent TypeScript support, auto-completion, and comprehensive docs.

Beautiful by Default

A modern, clean design out of the box with a theme you can adapt in minutes.

Accessible by Default

WAI-ARIA compliant with keyboard navigation, focus management, and screen reader support.

Production Ready

100+ battle-tested components used by thousands of applications in production.

Core technologies

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 Variants

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

  • Dynamic Styling: Flexible component variants with a powerful API
  • Type Safety: Full TypeScript support with auto-completion
  • Conflict Resolution: Efficient merging of conflicting styles

Key features

Ecosystem integration

Pohon UI integrates with the Nuxt ecosystem to provide a seamless development experience:

  • Icons: Access 200,000+ icons from Iconify
  • Fonts: Plug-and-play web font optimization and configuration
  • Color Mode: Dark and Light mode with auto detection
  • i18n: Internationalize your components with 50+ languages
  • Content: Beautiful typography out of the box

Vue Compatibility

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

  • Auto-imports: Components and composables are automatically imported and available globally
  • Theming System: Full theming support with customizable colors, sizes, variants, and more
  • Developer Experience: Complete TypeScript support with IntelliSense and auto-completion
Learn how to install and configure Pohon UI in a Vue project in the Vue installation guide.

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
If you prefer to use tailwind instead, you can check out Nuxt UI.

Installation

Learn how to install and configure Pohon UI in your Nuxt application.