Open-code aq-ui accessible component family for Card.
This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.
aq-uipnpm dlx aq-ui@alpha add cardImport the parts you need, then jump to an export for its contract.
import { Card } from "@/components/ui/card"
<Card />Open-code aq-ui accessible component family for Card.
const Card = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & { size?: "default" | "sm" }>(…)React.ComponentProps<"div"> & { size?: "default" | "sm" }| Name | Type | Default |
|---|---|---|
size? | "default" | "sm" | "default" |
Action export for composing Card.
const CardAction = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)React.ComponentProps<"div">Content export for composing Card.
const CardContent = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)React.ComponentProps<"div">Description export for composing Card.
const CardDescription = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)React.ComponentProps<"div">Footer export for composing Card.
const CardFooter = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)React.ComponentProps<"div">Header export for composing Card.
const CardHeader = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)React.ComponentProps<"div">Title export for composing Card.
const CardTitle = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)React.ComponentProps<"div">utils