Nuxt UI Pro v1.0 is out with dashboard components!

Pro

LandingCTA

CardGitHub

A pre-built Card to display a call to action panel in your landing pages.

Usage

The LandingCTA component will wrap your content in a Card.

Use the title, description and icon props to customize the content of card.

Trusted and supported by our amazing community

We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success.

<template>
  <ULandingCTA
    title="Trusted and supported by our amazing community"
    description="We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success."
    card
  />
</template>
You can disable its border and card style by setting the card prop to false.

You can add anything you want in the default slot, a gradient or an image for example (this will render better on full-screen).

You can change the align prop from center to left or right to position the slot horizontaly.

Join us

Incididunt fugiat duis in.

<template>
  <ULandingCTA
    title="Join us"
    description="Incididunt fugiat duis in."
    align="left"
    card
  >
    <img
      src="https://picsum.photos/640/360"
      class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
    />
  </ULandingCTA>
</template>

Use the links prop to add some Buttons below the description.

Trusted and supported by our amazing community

We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success.

<template>
  <ULandingCTA
    title="Trusted and supported by our amazing community"
    description="We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success."
    card
    :links="[{ label: 'Get started', color: 'gray', size: 'md' }, { label: 'Learn more', variant: 'link', color: 'gray', size: 'md', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]"
  />
</template>

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

content/index.yml
cta:
  title: Trusted and supported by our amazing community
  description: We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success.
  links:
    - label: 'Get started'
      color: 'gray'
      size: 'md'
    - label: 'Learn more'
      variant: 'link'
      color: 'gray'
      size: 'md'
      trailingIcon: 'i-heroicons-arrow-right-20-solid'
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 lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection>
    <ULandingCTA v-bind="page.cta" card />
  </ULandingSection>
</template>

Slots

title
{}
description
{}
links
{}
default
{}

Props

title
string
undefined
description
string
undefined
ui
{}
{}
links
(Button & { click?: Function; })[]
[]
align
"left" | "center" | "right"
"center"
card
boolean
true

Config

{
  wrapper: 'relative',
  container: 'text-center',
  body: {
    base: 'flex flex-col gap-16 sm:gap-y-24',
    padding: 'py-24 sm:py-32 sm:px-16'
  },
  title: 'text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl',
  description: 'mt-6 text-lg/8 text-gray-600 dark:text-gray-300',
  links: 'mt-10 flex items-center justify-center gap-x-6'
}

LandingCard

A pre-built Card with slot support and hover effect.

LandingFAQ

A pre-styled Accordion to display an FAQ on your landing pages.