Patterns

Card

The one surface: hairline border, no shadow at rest.

Static card

For content that is read.

Body text.

Interactive card

Lifts on hover; the whole card is the target.

card.tsx

"use client";

import { Card, CardDescription, CardHeader, CardTitle } from "@waveinno/ui";

export default function CardExample() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <Card>
        <CardHeader>
          <div>
            <CardTitle>Static card</CardTitle>
            <CardDescription>For content that is read.</CardDescription>
          </div>
        </CardHeader>
        <p className="text-sm text-body">Body text.</p>
      </Card>
      <Card interactive>
        <CardTitle>Interactive card</CardTitle>
        <CardDescription>Lifts on hover; the whole card is the target.</CardDescription>
      </Card>
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { Card, CardDescription, CardHeader, CardTitle } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<Card>

src/components/ui/card.tsx

Prop	Type	Default	Description
`interactive`	`boolean`	—

Also takes HTMLAttributes<HTMLDivElement>.

<CardDescription>

src/components/ui/card.tsx

Also takes HTMLAttributes<HTMLParagraphElement> (passed through).

<CardHeader>

src/components/ui/card.tsx

Also takes HTMLAttributes<HTMLDivElement> (passed through).

<CardTitle>

src/components/ui/card.tsx

Also takes HTMLAttributes<HTMLHeadingElement> (passed through).

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui