labsUI

Card

Composable surface: header, title, description, content and footer. Optional glass.

npx @kznlabs/labsui add card

Monthly revenue

$48,290

+12.4%vs last month

Notifications

Glass variant · backdrop blur.

Push alerts
import { Badge } from "@/components/ui/badge";import {  Card,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/components/ui/card";import { CountTo } from "@/components/ui/count-to";export function Revenue() {  return (    <Card>      <CardHeader>        <CardDescription>Monthly revenue</CardDescription>        <CardTitle>          <CountTo to={48290} prefix="$" />        </CardTitle>      </CardHeader>      <CardFooter>        <Badge variant="success" shape="pill">          +12.4%        </Badge>      </CardFooter>    </Card>  );}

<Card>

  • glass
    boolean

    Subtle translucency; place over textured/colored backgrounds.

PropTypeDefault
glass

Subtle translucency; place over textured/colored backgrounds.

boolean—

Also accepts every <div> prop.

<CardHeader>

Also accepts every <div> prop (none of its own).

<CardTitle>

Heading level follows the page outline: as="h2" directly under the page's h1. Default h3.

  • asdefault "h3"
    "h2" | "h3" | "h4" | "h5" | "h6" | "p"

    Heading level that fits the page outline; "p" when it is not a heading.

PropTypeDefault
as

Heading level that fits the page outline; "p" when it is not a heading.

"h2" | "h3" | "h4" | "h5" | "h6" | "p""h3"

Also accepts every <h3> prop.

<CardDescription>

Also accepts every <p> prop (none of its own).

<CardContent>

Also accepts every <div> prop (none of its own).

<CardFooter>

Also accepts every <div> prop (none of its own).

* required. Every component also takes className.