Zentauri UI
Layout

Cards for grouped dashboard content

Cards bundle headers, body content, and actions into a predictable surface for dashboards and marketing layouts. Use them in React apps and Next.js pages that need modular content blocks.

Usage this month

Resets on the first of next month.

72%

of included API calls consumed

Examples

Outline appearance with tilt animation on hover-capable devices.

Note

Autosaved

Draft content for this preview.

Card variants examples

Appearance, size, and rounded radius tokens with a minimal header layout. Code blocks start with Variant: for the row.

Appearance: DEFAULT, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GLASS, Size: MD, Rounded: MD

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GHOST, Size: MD, Rounded: MD

Brief supporting description.

Appearance: ELEVATED, Size: MD, Rounded: MD

Brief supporting description.

Appearance: SKY, Size: MD, Rounded: MD

Brief supporting description.

Appearance: ROSE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: PURPLE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: PINK, Size: MD, Rounded: MD

Brief supporting description.

Appearance: ORANGE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: YELLOW, Size: MD, Rounded: MD

Brief supporting description.

Appearance: TEAL, Size: MD, Rounded: MD

Brief supporting description.

Appearance: INDIGO, Size: MD, Rounded: MD

Brief supporting description.

Appearance: EMERALD, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRAY, Size: MD, Rounded: MD

Brief supporting description.

Appearance: AMBER, Size: MD, Rounded: MD

Brief supporting description.

Appearance: VIOLET, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-BLUE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-GREEN, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-RED, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-YELLOW, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-PURPLE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-TEAL, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-INDIGO, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-PINK, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-ORANGE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GLASS, Size: SM, Rounded: MD

Brief supporting description.

Appearance: GLASS, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GLASS, Size: LG, Rounded: MD

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: SM

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: LG

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: FULL

Brief supporting description.

What it does

Cards are intentionally dumb containers: push business logic up a layer.

Use consistent padding tokens so grids align across breakpoints.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Keep heading levels coordinated with surrounding page structure for SEO and accessibility.

Common use cases

  • Surface KPI summaries on analytics landing pages.
  • Group related settings with a clear title and footer actions.
  • Present catalog items with media, price, and CTA rows.
  • Stack quick links in responsive grids.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Card component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize card with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Card implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.