Card

unreleasedstable

A content container for grouping related information and actions.

API Reference
tsxUsage
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/components/ui/card";
 
export function Component() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Configure a new workspace.</CardDescription>
      </CardHeader>
      <CardPanel>Project settings go here.</CardPanel>
      <CardFooter>Actions go here.</CardFooter>
    </Card>
  );
}

Card

Root container with border, surface, and card foreground tokens.

CardHeader

Top region for title, description, and optional action.

CardTitle

Primary heading inside the card header.

CardPanel

Main content region with default card padding.

CardFooter

Bottom region for actions or secondary information.

Keystone UI is a new, modern UI component library for SolidJS.

Back to top