Core Component

Card

Content container with optional header and footer slots. The structural building block for grouped information.

Preview

Model Settings

Configure temperature, max tokens, and system prompt.

Source

Full component implementation using the design system tokens.

tsx

export function DSCard({
  header,
  footer,
  children,
}: {
  header?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div className="border border-overlay/10 rounded-xl bg-surface overflow-hidden">
      {header && (
        <div className="px-5 py-4 border-b border-overlay/5">{header}</div>
      )}
      <div className="px-5 py-4">{children}</div>
      {footer && (
        <div className="px-5 py-3 border-t border-overlay/5 bg-surface/50">
          {footer}
        </div>
      )}
    </div>
  );
}

Props

All available props with types and defaults.

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Card body content
`header`	`ReactNode`	`—`	Optional header section
`footer`	`ReactNode`	`—`	Optional footer section

Variants

Basic

Simple content card with body only.

Simple content card with just a body.

tsx

<DSCard>
  <p className="text-sm text-foreground">
    Simple content card with just a body.
  </p>
</DSCard>

With header

Card with a titled header section.

Model Settings

Configure temperature, max tokens, and system prompt.

tsx

<DSCard
  header={<h3 className="font-medium">Model Settings</h3>}
>
  <p className="text-sm text-secondary">
    Configure temperature, max tokens, and system prompt.
  </p>
</DSCard>

Full

Card with header, body, and footer — for complete content blocks.

Usage this month

142,380 tokens

Resets on the 1st

tsx

<DSCard
  header={<h3 className="font-medium">Usage this month</h3>}
  footer={
    <p className="text-xs text-tertiary">Resets on the 1st</p>
  }
>
  <p className="text-2xl font-light">142,380 tokens</p>
</DSCard>

Prompt Guide

Prompt Guide — Card

Use for

Settings panels and configuration groups
Usage stats and metric displays
Tool result containers
Model comparison panels

Don't use for

Chat messages — use Chat Bubble
AI-generated content blocks — use Artifact Card
Full-width sections — cards imply contained, bounded content

AI Context

Cards organize related information in AI dashboards: usage metrics, API key management, model configuration. The header/body/footer pattern maps to title/content/actions. Keep cards scannable — if the content needs scrolling, break it into multiple cards.