pohon-ui

Pohon UI

Pohon UI harnesses the combined strengths of Akar, UnoCSS, and UnoCss Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

Documentation

Visit https://vinicunca.dev/pohon to explore the documentation.

Templates

Kickstart your project with one of our ready-to-use Pohon UI templates or follow the Installation Guide. Explore all available templates on the official templates page.

• Starter — A minimal template to get started with Pohon UI.
• Landing — A modern landing page template powered by Nuxt Content.
• Docs — A documentation template powered by Nuxt Content.
• SaaS — A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.
• Dashboard — A dashboard template with multi-column layout.
• Chat — An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK.
• Portfolio — A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content.
• Changelog — A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC.
• Editor — A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types.

Installation

pnpm add pohon-ui unocss @vinicunca/unocss-preset

yarn add pohon-ui unocss @vinicunca/unocss-preset

npm install pohon-ui unocss @vinicunca/unocss-preset

bun add pohon-ui unocss @vinicunca/unocss-preset

Nuxt

1. Add the Pohon UI module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['pohon-ui'],
});

2. Configure the UnoCSS preset (the module registers @unocss/nuxt for you):

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { pohonColors } from 'pohon-ui/unocss';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [presetVinicunca()],
  theme: { colors: pohonColors },
});

Learn more in the installation guide.

Vue

1. Add the Pohon UI Vite plugin in your vite.config.ts:

import vue from '@vitejs/plugin-vue';
import ui from 'pohon-ui/vite';
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [UnoCSS(), vue(), ui()],
});

2. Use the Pohon UI Vue plugin in your main.ts:

import ui from 'pohon-ui/vue-plugin';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import 'virtual:uno.css';

const app = createApp(App);

const router = createRouter({
  routes: [],
  history: createWebHistory(),
});

app.use(router);
app.use(ui);

app.mount('#app');

3. Configure the UnoCSS preset:

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { pohonColors } from 'pohon-ui/unocss';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [presetVinicunca()],
  theme: { colors: pohonColors },
});

Learn more in the installation guide.

Contribution

Thank you for considering contributing to Pohon UI. Here are a few ways you can get involved:

• Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
• Suggestions: Have any thoughts to enhance Pohon UI? We'd love to hear them! Check out the contribution guide to share your suggestions.

[!TIP] We provide contributing guidelines through AGENTS.md for AI assistants to help you contribute to Pohon UI. It is automatically picked up by all AI coding agents and guides through component structure, theming patterns, testing conventions, and documentation guidelines.

Local Development

Follow the docs to set up your local development environment and contribute.

Credits

Pohon UI is derived from Nuxt UI, ported from Tailwind CSS to UnoCSS.

• nuxt/ui
• nuxt/nuxt
• nuxt/icon
• nuxt/fonts
• nuxt-modules/color-mode
• unovue/reka-ui
• unocss/unocss
• vueuse/vueuse

License

Licensed under the MIT license.