Component

Card

Low-elevation containers for individual repeated items or genuine tool surfaces.

Preview

Spending plan

Quiet surfaces for grouped controls and small summaries.

Left$428

ResetJun 15

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Card } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/card.json

Copied source import

code

import "@/styles/axie.css";import { Card } from "@/components/axie/card";

Prefer @axie/card? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Card, CardContent, CardHeader, CardTitle } from "axie-ui";export function Example() {  return (    <Card>      <CardHeader>        <CardTitle>Spending plan</CardTitle>      </CardHeader>      <CardContent>Content</CardContent>    </Card>  );}

Accessibility

Cards should not become generic clickable divs; wrap the correct inner action in a link or button.
Use heading levels that fit the surrounding page structure.
Avoid nesting cards inside other cards because hierarchy becomes hard to parse.

Variants

Use softer variants when elevation is not carrying hierarchy.

Surface

Default elevated surface.

Soft

Muted grouping without much lift.

Outline

Border-only framing.

API Reference

Prop	Type	Default	Description
variant	surface \| soft \| outline	surface	Controls elevation and surface treatment.
...props	HTMLAttributes<HTMLDivElement>	-	Container element props.
className	string	-	Optional classes for spacing and layout.