Skip to content

Foundations

Surface

Shell, Panel, Inset, IconTile and ShellHeader — the borderless layers every component is framed with.

2 variantsMIT

Preview

Shell

Headers and footers sit in its padding

Panel

Main content, one step lighter or darker than the shell.

Inset — code, payloads and details, one level deeper

Footer text lives in the shell too.

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/surface.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { Brain } from "@phosphor-icons/react";
import { Inset, Panel, Shell, ShellHeader } from "@/components/ui/surface";

export function MemoryCard() {
  return (
    <Shell className="max-w-md">
      <ShellHeader icon={Brain} title="Memory" subtitle="5 memories" />
      <Panel className="p-4">
        <Inset className="px-3.5 py-3 font-mono text-xs">AGENTS.md</Inset>
      </Panel>
    </Shell>
  );
}

Props

PropTypeDefaultDescription
Shell<section>—Outer frame: rounded-[1.375rem] bg-surface p-1.5.
Panel<div>—Content area inside a shell: rounded-2xl bg-surface-inset.
Inset<div>—Deeper block inside a panel: rounded-xl bg-foreground/[0.04].
IconTile{ icon?: Icon } & <div>—Tinted 36px square holding a filled Phosphor icon, or children.
ShellHeader.iconIcon—Phosphor icon shown in an IconTile, 12px from the shell edge.
ShellHeader.title*ReactNode—Header title.
ShellHeader.subtitleReactNode—Secondary line under the title.
ShellHeader.asideReactNode—Right side — a stat, pill or actions, vertically centered.
ShellHeader.as"h2" | "h3" | "h4""h3"Heading level of the title.