LandingGrid

A customizable grid to display cards as a masonry layout.

Usage

Use some LandingCard, PageCard or anything really in the default slot to display a masonry grid.

Color Palette

Choose a primary and a gray color from your Tailwind CSS color palette.

Fully Customizable

Change the style of any component in your App Config or with ui prop.

Icons

Choose any of the 100k+ icons from the most popular icon libraries.

Keyboard Shortcuts

Nuxt UI comes with a set of Vue composables to easily handle shortcuts.

<template>
  <ULandingGrid>
    <ULandingCard class="col-span-6 row-span-2" icon="i-heroicons-swatch" title="Color Palette" description="Choose a primary and a gray color from your Tailwind CSS color palette." />
    <ULandingCard class="col-span-6 row-span-4" icon="i-heroicons-wrench-screwdriver" title="Fully Customizable" description="Change the style of any component in your App Config or with ui prop." />
    <ULandingCard class="col-span-6 row-span-4" icon="i-heroicons-face-smile" title="Icons" description="Choose any of the 100k+ icons from the most popular icon libraries." />
    <ULandingCard class="col-span-6 row-span-2" icon="i-heroicons-computer-desktop" title="Keyboard Shortcuts" description="Nuxt UI comes with a set of Vue composables to easily handle shortcuts." />
  </ULandingGrid>
</template>

This component can be put directly inside a LandingSection with its content fetched from @nuxt/content easily:

content/index.yml
features:
  title: Everything you expect from a<br class="hidden lg:block"> <span class="text-primary">UI component library</span>
  cards:
    - title: Color Palette
      description: 'Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.'
      icon: i-heroicons-swatch
      to: /getting-started/theming#colors
      class: 'col-span-7 row-span-3'
    - title: Fully Customizable
      description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
      icon: i-heroicons-wrench-screwdriver
      to: /getting-started/theming#components
      class: 'col-span-5 row-span-5 lg:mb-10'
    - title: Icons
      description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
      icon: i-heroicons-face-smile
      to: /getting-started/theming#icons
      class: 'col-span-7 row-span-3'
    - title: Light & Dark
      description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
      to: /getting-started/theming#dark-mode
      icon: i-heroicons-moon
      class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
    - title: Keyboard Shortcuts
      description: 'Nuxt UI comes with a set of Vue composables to easily handle keyboard shortcuts in your app.'
      icon: i-heroicons-computer-desktop
      to: /getting-started/shortcuts
      class: 'col-span-7 row-span-3'
We're using .yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.
pages/index.vue
<script setup>
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection :title="page.features.title">
    <ULandingGrid>
      <ULandingCard
        v-for="(card, index) of section.cards"
        :key="index"
        v-bind="card"
      />
    </ULandingGrid>
  </ULandingSection>
</template>

Props

ui
unknown

Slots

default
{}