Card
Displays a card with header, content, and footer.
Create project
Deploy your new project in one-click.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/card.tsx
export const Card = (o) => \`<div class="rounded-xl border bg-card text-card-foreground shadow \${o.class || ""}">\${o.children}</div>\`;
export const CardHeader = (o) => \`<div class="flex flex-col space-y-1.5 p-6">\${o.children}</div>\`;
export const CardTitle = (o) => \`<div class="font-semibold leading-none tracking-tight">\${o.children}</div>\`;
export const CardDescription = (o) => \`<div class="text-sm text-muted-foreground">\${o.children}</div>\`;
export const CardContent = (o) => \`<div class="p-6 pt-0">\${o.children}</div>\`;
export const CardFooter = (o) => \`<div class="flex items-center p-6 pt-0">\${o.children}</div>\`;Installation
$ bext ui add cardCopy and paste the following into src/components/ui/card.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/card.tsx
export const Card = (o) => \`<div class="rounded-xl border bg-card text-card-foreground shadow \${o.class || ""}">\${o.children}</div>\`;
export const CardHeader = (o) => \`<div class="flex flex-col space-y-1.5 p-6">\${o.children}</div>\`;
export const CardTitle = (o) => \`<div class="font-semibold leading-none tracking-tight">\${o.children}</div>\`;
export const CardDescription = (o) => \`<div class="text-sm text-muted-foreground">\${o.children}</div>\`;
export const CardContent = (o) => \`<div class="p-6 pt-0">\${o.children}</div>\`;
export const CardFooter = (o) => \`<div class="flex items-center p-6 pt-0">\${o.children}</div>\`;On This Page