PageGrid

A responsive grid system for displaying content in a flexible layout.

Usage

The PageGrid component provides a responsive grid layout for displaying PageCard components or any other elements, automatically adjusting from 1 to 3 columns based on screen size.

Icons

Pohon UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.

Fonts

Pohon UI integrates with Nuxt Fonts to provide plug-and-play font optimization.

Color Mode

Pohon UI integrates with Nuxt Color Mode to switch between light and dark.

<script setup lang="ts">
const cards = ref([
  {
    title: 'Icons',
    description: 'Pohon UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/pohon/getting-started/integrations/icons/nuxt',
  },
  {
    title: 'Fonts',
    description: 'Pohon UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/pohon/getting-started/integrations/fonts',
  },
  {
    title: 'Color Mode',
    description: 'Pohon UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/pohon/getting-started/integrations/color-mode/nuxt',
  },
]);
</script>

<template>
  <PPageGrid>
    <PPageCard
      v-for="(card, index) in cards"
      :key="index"
      v-bind="card"
    />
  </PPageGrid>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'

const cards = ref([
  {
    title: 'Icons',
    description: 'Pohon UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/pohon/getting-started/integrations/icons/nuxt',
  },
  {
    title: 'Fonts',
    description: 'Pohon UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/pohon/getting-started/integrations/fonts',
  },
  {
    title: 'Color Mode',
    description: 'Pohon UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/pohon/getting-started/integrations/color-mode/nuxt',
  },
]);
</script>

<template>
  <PPageGrid>
    <PPageCard
      v-for="(card, index) in cards"
      :key="index"
      v-bind="card"
    />
  </PPageGrid>
</template>

You can also use it to display a list of cards in a bento style layout by using col-span-* and row-span-* utility classes.

Theme

Learn how to customize Pohon UI components using UnoCSS.

Fonts

Pohon UI integrates with Nuxt Fonts to provide plug-and-play font optimization.

Color Mode

Pohon UI integrates with Nuxt Color Mode to switch between light and dark.

Icons

Pohon UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.

<script setup lang="ts">
const cards = ref([
  {
    title: 'Theme',
    description: 'Learn how to customize Pohon UI components using UnoCSS.',
    icon: 'i-lucide-swatch-book',
    to: '/pohon/getting-started/theme/design-system',
    class: 'lg:col-span-2',
    orientation: 'horizontal' as const,
  },
  {
    title: 'Fonts',
    description: 'Pohon UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/pohon/getting-started/integrations/fonts',
    variant: 'soft' as const,
  },
  {
    title: 'Color Mode',
    description: 'Pohon UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/pohon/getting-started/integrations/color-mode/nuxt',
    variant: 'soft' as const,
  },
  {
    title: 'Icons',
    description: 'Pohon UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/pohon/getting-started/integrations/icons/nuxt',
    class: 'lg:col-span-2',
    orientation: 'horizontal' as const,
    reverse: true,
  },
]);
</script>

<template>
  <PPageGrid>
    <PPageCard
      v-for="(card, index) in cards"
      :key="index"
      v-bind="card"
    />
  </PPageGrid>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'

const cards = ref([
  {
    title: 'Theme',
    description: 'Learn how to customize Pohon UI components using UnoCSS.',
    icon: 'i-lucide-swatch-book',
    to: '/pohon/getting-started/theme/design-system',
    class: 'lg:col-span-2',
    orientation: 'horizontal' as const,
  },
  {
    title: 'Fonts',
    description: 'Pohon UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/pohon/getting-started/integrations/fonts',
    variant: 'soft' as const,
  },
  {
    title: 'Color Mode',
    description: 'Pohon UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/pohon/getting-started/integrations/color-mode/nuxt',
    variant: 'soft' as const,
  },
  {
    title: 'Icons',
    description: 'Pohon UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/pohon/getting-started/integrations/icons/nuxt',
    class: 'lg:col-span-2',
    orientation: 'horizontal' as const,
    reverse: true,
  },
]);
</script>

<template>
  <PPageGrid>
    <PPageCard
      v-for="(card, index) in cards"
      :key="index"
      v-bind="card"
    />
  </PPageGrid>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`ui`		`{ base?: any; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    pageGrid: {
      base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
    }
  }
})

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageGrid: {
          base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
        }
      }
    })
  ]
})

Changelog

No recent changes

PageFeature

A component to showcase key features of your application.

PageHeader

A responsive header for your pages.