--- title: "Introduction" description: "Pohon UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, UnoCSS components for building modern web applications." canonical_url: "https://vinicunca.dev/pohon/getting-started" --- # Introduction > Pohon UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, UnoCSS components for building modern web applications. ## What is Pohon UI? A modern Vue UI component library built on [Akar](https://vinicunca.dev/akar/overview), [UnoCSS](https://unocss.dev/), and [UnoCSS Variants](https://vinicunca.dev/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](https://ui.nuxt.com), 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](https://github.com/nuxt-ui) for the original implementation. **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** 125+ battle-tested components including data tables, forms, overlays, and navigation used by thousands of applications in production. ## 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](https://vinicunca.dev/akar/overview) as a foundation for the components: - **WAI-ARIA Compliance**: Follows [WAI-ARIA authoring practices](https://vinicunca.dev/akar/overview/accessibility) 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](https://unocss.dev/), 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](https://vinicunca.dev/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: **Nuxt:** - [**Icons**](https://vinicunca.dev/pohon/getting-started/integrations/icons/nuxt): Access 200,000+ icons from Iconify - [**Fonts**](https://vinicunca.dev/pohon/getting-started/integrations/fonts): Plug-and-play web font optimization and configuration - [**Color Mode**](https://vinicunca.dev/pohon/getting-started/integrations/color-mode/nuxt): Dark and Light mode with auto detection - [**i18n**](https://vinicunca.dev/pohon/getting-started/integrations/i18n/nuxt): Internationalize your components with 50+ languages - [**Content**](https://vinicunca.dev/pohon/getting-started/integrations/content): Beautiful typography out of the box **Vue:** - [**Icons**](https://vinicunca.dev/pohon/getting-started/integrations/icons/vue): Access 200,000+ icons from Iconify - [**Color Mode**](https://vinicunca.dev/pohon/getting-started/integrations/color-mode/vue): Dark and Light mode with auto detection - [**i18n**](https://vinicunca.dev/pohon/getting-started/integrations/i18n/vue): Internationalize your components with 50+ languages ### 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 > [!TIP] > See: /pohon/getting-started/installation/vue > > 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](https://vuejs.org/api/sfc-script-setup.html#generics) - **Type-safe Theming**: In `app.config.ts` - **IntelliSense**: Throughout your entire codebase ### Working examples The [Nuxt playground](https://github.com/vinicunca/pohon/tree/main/playgrounds/nuxt) and [Vue playground](https://github.com/vinicunca/pohon/tree/main/playgrounds/vue) show complete Pohon UI and UnoCSS configurations. ## FAQ **Q: Is Pohon UI free to use?** Yes! Pohon UI is completely free and open source under the MIT license. All 125+ components are available to everyone. **Q: Can I use Pohon UI with Vue without Nuxt?** Yes! While optimized for Nuxt, Pohon UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the [installation guide](https://vinicunca.dev/pohon/getting-started/installation/vue) to get started. **Q: How does Pohon UI handle accessibility?** Through [Akar](https://vinicunca.dev/akar/overview/accessibility) integration, Pohon UI provides automatic ARIA attributes, keyboard navigation, focus management, and screen reader support. While offering a strong foundation, testing in your specific use case remains important. **Q: Is Pohon UI production-ready?** Pohon UI includes components for production Vue applications and is covered by the repository test suite. Test your application flows and accessibility requirements before release. **Q: When should I consider alternatives?** Consider [**Nuxt UI**](https://ui.nuxt.com) if you prefer Tailwind CSS over UnoCSS **Vuetify** if you want Material Design styling, **ant-design-vue** for Ant Design styling, **PrimeVue** or **Element Plus** if you don't want UnoCSS, **shadcn-vue** if you prefer copying components into your repo, **Quasar** for cross-platform apps (web, mobile, desktop), or **Akar** / **Headless UI** if you only need unstyled primitives. **Q: Where can I get help?** Ask questions and get help in [GitHub Discussions](https://github.com/vinicunca/pohon/discussions/categories/q-a), chat with the community on [Discord](https://github.com/vinicunca/pohon/discussions), or report bugs on [GitHub](https://github.com/vinicunca/pohon/issues). ## Sitemap See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.