Primitive / Moleculestable

Card

Flexible surface container for grouped content.

@glinui/uiComponent: card

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add card

Usage

Basic

Project Overview

Weekly performance summary.

Revenue grew 18% and churn dropped 1.2%.

Updated 2 min ago

TSX

1import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Card>
6      <CardHeader>
7        <CardTitle>Project Overview</CardTitle>
8        <CardDescription>Weekly performance summary.</CardDescription>
9      </CardHeader>
10      <CardContent>Revenue grew 18% and churn dropped 1.2%.</CardContent>
11      <CardFooter>
12        <p className="text-sm text-neutral-500">Updated 2 min ago</p>
13      </CardFooter>
14    </Card>
15  )
16}

Glass Variant

Glass Card

Frosted surface container.

TSX

1import { Card, CardHeader, CardTitle, CardContent } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Card variant="glass">
6      <CardHeader>
7        <CardTitle>Glass Card</CardTitle>
8      </CardHeader>
9      <CardContent>Frosted surface container.</CardContent>
10    </Card>
11  )
12}

Accessibility

Semantic `<div>` containers.
Use `CardTitle` for heading hierarchy.
Add landmark roles if card represents a section.

ARIA Attributes

Semantic divs
Heading hierarchy via CardTitle

Reduced Motion

No animation dependencies.

API Reference

`CardProps`

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Padding density (p-4/p-6/p-8).

`CardHeaderProps`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from cardSectionVariants.

`CardTitleProps`

Prop	Type	Required	Default	Description
`className`	`string`	No	`-`	Additional class names.

`CardDescriptionProps`

Prop	Type	Required	Default	Description
`className`	`string`	No	`-`	Additional class names.

`CardContentProps`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from cardSectionVariants.

`CardFooterProps`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from cardSectionVariants.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Card } from "@glinui/ui"

Source Files

card.tsx

card.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/card.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

CardProps