Components

Card

The Lumora base surface.

Night shift

New

Hover the card — the lift variant raises it 2px on a deeper shadow.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add card

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Card, CardHeader, CardTitle, CardBody, CardFooter } from "@lumora/ui/components/card";
// or from the barrel:
import { Card, CardHeader, CardTitle, CardBody, CardFooter } from "@lumora/ui";

Props worth knowing

variant: quiet | lift | glow — quiet sits flat, lift raises 2px with a deeper shadow on hover, glow carries the lumen. padding: none | sm | md | lg (default md). Compose with the header, title, body and footer subcomponents. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.