Installation

Setup

Add to a Nuxt project

pnpm add pohon-ui

npm install pohon-ui

bun add pohon-ui

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

import { defineConfig } from 'unocss';

export default defineConfig({
});

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

<template>
  <PApp>
    <NuxtPage />
  </PApp>
</template>

Use a Nuxt template

To quickly get started with Pohon UI, you can use the starter template by running:

npm create nuxt@latest -- -t pohon-ui

You can also get started with one of our official templates:

You can use the Use this template button on GitHub to create a new repository or use the CLI:

pnpm create nuxt@latest -- -t pohon-ui

pnpm create nuxt@latest -- -t pohon-ui/docs

pnpm create nuxt@latest -- -t pohon-ui/dashboard

Options

You can customize Pohon UI by providing options in your nuxt.config.ts.

prefix

Use the prefix option to change the prefix of the components.

• Default: P

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

fonts

Use the fonts option to enable or disable the @nuxt/fonts module.

• Default: true

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

colorMode

Use the colorMode option to enable or disable the @nuxt/color-mode module.

• Default: true

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

theme.colors

Use the theme.colors option to define the dynamic color aliases used to generate components theme.

• Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error']

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

theme.defaultVariants

Use the theme.defaultVariants option to override the default color and size variants for components.

• Default: { color: 'primary', size: 'md' }

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  pohon: {
    theme: {
      defaultVariants: {
        color: 'neutral',
        size: 'sm'
      }
    }
  }
});

mdc

Use the mdc option to force the import of Pohon UI <Prose> components even if @nuxtjs/mdc or @nuxt/content is not installed.

• Default: false

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

content

Use the content option to force the import of Pohon UI <Prose> and <PContent> components even if @nuxt/content is not installed (@nuxtjs/mdc is installed by @nuxt/content).

• Default: false

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

Continuous releases

Pohon UI uses pkg.pr.new for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

Automatic preview releases are created for all commits and PRs to the main branch. Use them by replacing your package version with the specific commit hash or PR number.

{
  "dependencies": {
-   "pohon-ui": "^1.0.0",
+   "pohon-ui": "https://pkg.pr.new/pohon-ui@4c96909",
  }
}