Trivela UI

Card

A surface that groups related content, with header, content, and footer sections.

Card itself has no padding — CardHeader, CardContent, and CardFooter carry it. That keeps padding from doubling up when they are composed, and lets content run edge to edge (an image, a table) by simply not wrapping it. A bare <Card> needs its own className="p-6".

Project settings

Manage your configuration.

Anything you like goes here.

Usage

card-demo.tsx
import { Card, CardHeader, CardContent, CardFooter } from 'trivela-ui';

export function Example() {
  return (
    <Card>
      <CardHeader>
        <h3 className="font-semibold">Project settings</h3>
        <p className="text-sm text-slate-600">Manage your configuration.</p>
      </CardHeader>
      <CardContent>
        <p className="text-sm">Anything you like goes here.</p>
      </CardContent>
      <CardFooter>
        <Button>Save</Button>
      </CardFooter>
    </Card>
  );
}

Examples

Anatomy

The three sections stack in order. Each is optional — use only the ones you need.

Deploy

Ready

Ship the latest commit.

Builds run on every push to main.

With a form

CardFooter is a flex row, so actions line up without extra markup.

Create project

Give it a name to get started.

Variants

The variant controls the border and fill. The default is outline, not solid.

outline
solid
subtle
ghost

Colors

Color tints the border and background.

primary
success
warning
danger

Edge to edge

Skip CardContent for anything that should reach the card's borders — the reason the padding is not on Card itself.

Full-bleed banner

Nothing inset it

The banner touches all three edges.

API Reference

PropTypeDefaultDescription
variant'solid' | 'ghost' | 'outline' | 'subtle''outline'Card only — style variant.
color'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral''neutral'Card only — color scale for the border and fill.
size'sm' | 'md' | 'lg''md'Card only — padding density of its sections.
classNamestring—Merged with the generated classes via cn().
...propsHTMLAttributes<HTMLDivElement>—All native attributes are forwarded to the root element.
CardHeaderHTMLAttributes<HTMLDivElement>—Top section. A flex column with gap-1.5 and p-6.
CardContentHTMLAttributes<HTMLDivElement>—Body. p-6 pt-0 — add pt-6 yourself when there is no header above it.
CardFooterHTMLAttributes<HTMLDivElement>—Action row. A flex row with gap-2 and p-6 pt-0.