Skip to content
aq-ui
Back to ComponentsComponent

Card

Open-code aq-ui accessible component family for Card.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add card

API reference

SSR-safe

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

import { Card } from "@/components/ui/card"

<Card />

Card

constSource L5

Open-code aq-ui accessible component family for Card.

const Card = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & { size?: "default" | "sm" }>(…)
Props type
React.ComponentProps<"div"> & { size?: "default" | "sm" }

Props

NameTypeDefault
size?"default" | "sm""default"
<Card />

CardAction

constSource L78

Action export for composing Card.

const CardAction = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<CardAction />

CardContent

constSource L96

Content export for composing Card.

const CardContent = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<CardContent />

CardDescription

constSource L60

Description export for composing Card.

const CardDescription = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<CardDescription />

CardHeader

constSource L24

Header export for composing Card.

const CardHeader = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<CardHeader />

CardTitle

constSource L42

Title export for composing Card.

const CardTitle = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<CardTitle />

Registry dependencies

utils

Files

  • components/ui/card.tsx

Source