Nuxt UI v4 is officially released!

LandingCard

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

Usage

Built on top of the Card component, the LandingCard can be used in a LandingGrid or a PageGrid.

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

You can also pass any property from the NuxtLink component such as to, target, exact, etc.

Color Palette

Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

You can add anything you want in the default slot, an image for example.

You can change the orientation prop from vertical to horizontal to position the slot on the right side of the content.

Portfolio

Veniam minim ipsum anim. Irure voluptate magna dolore id dolore ex quis sint sint et duis dolor enim fugiat.
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

icon
{}
title
{}
description
{}
default
{}
container
{}

Props

target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
undefined
to
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
undefined
activeClass
string
undefined
exactActiveClass
string
undefined
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
undefined
prefetchedClass
string
undefined
title
string
undefined
description
string
undefined
icon
string
undefined
color
"red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "primary"
'primary'
orientation
"vertical" | "horizontal"
'vertical'
class
any
undefined
ui
any
{}
href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
undefined
rel
any
undefined
replace
boolean
undefined
noRel
boolean
undefined
prefetch
boolean
undefined
noPrefetch
boolean
undefined
external
boolean
undefined

Config

{
  wrapper: 'relative group isolate rounded-xl background-gradient ring-1 ring-gray-200 dark:ring-gray-800 before:hidden before:lg:block before:absolute before:-inset-[2px] before:h-[calc(100%+4px)] before:w-[calc(100%+4px)] before:z-[-1] before:rounded-[13px] flex-1 flex flex-col shadow',
  to: 'hover:ring-primary-500 dark:hover:ring-primary-400 transition-shadow duration-200',
  base: 'flex-1 flex flex-col overflow-hidden',
  container: '',
  body: {
    base: 'gap-x-8 gap-y-4 rounded-xl flex-1 flex flex-col'
  },
  background: 'bg-white dark:bg-gray-900 hover:bg-opacity-90 dark:hover:bg-opacity-90 transition-[background-opacity]',
  ring: '',
  rounded: 'rounded-xl',
  shadow: '',
  icon: {
    wrapper: 'mb-2 pointer-events-none',
    base: 'w-8 h-8 flex-shrink-0 text-gray-900 dark:text-white'
  },
  title: 'text-gray-900 dark:text-white text-base font-bold truncate',
  description: 'text-[15px] text-gray-500 dark:text-gray-400 mt-1'
}

HeaderPopoverLinks

A list of links displayed in a header Popover.

LandingCTA

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