Bigface UI

import { Button } from "@/components/ui/button";

Every variant × size. Icon sizes carry an icon instead of a label.

States per variant. Hover and focus are live: point at or tab to any button above.

import { Badge } from "@/components/ui/badge";

Every variant; Badge has no size. Not interactive, so no hover or disabled state.

import {
  Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
} from "@/components/ui/card";

Both sizes with every slot filled. Static, so no states.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

Every list variant × orientation, live (one island each). The third trigger is disabled; focus and arrow keys work.

Every component the CLI ships, installed and upgrade-clean (ui:drift). The four above are documented in depth; the rest are registered with how many parts each exports and the variant keys its own source declares.

Bigface tones (glow, ghost, copy, nav, chip) layered on the shadcn Button; href renders a link.

export type BGButtonProps = Omit<ButtonProps, "asChild"> &
  VariantProps<typeof bgButtonVariants> & {
    /** Render as a link (shadcn's asChild + <a>), so .astro pages can pass plain text children. */
    href?: string;

Mono uppercase pill, tinted by how far a theme was checked.

export type BGBadgeProps = React.ComponentProps<typeof Badge> &
  VariantProps<typeof bgBadgeVariants>;

The deep translucent plate with a hairline border; glow adds the blue→lime rim.

export type BGCardProps = React.ComponentProps<typeof Card> & VariantProps<typeof bgCardVariants>;

Install / uninstall command switcher: shadcn Tabs in one island, panels force-mounted.

Not final: item shape (bar, command, note) is ad hoc to the install section.

curl -fsSL https://bigface.qqntt.com/install.sh | sh -s -- pi

curl -fsSL https://bigface.qqntt.com/install.sh | sh -s -- --uninstall pi

export interface BGInstallTab {
  id: string;
  label: string;
  /** Title in the fake terminal bar, e.g. "sh — install". Omit for no bar. */
  bar?: string;
  command: string;
  note: string;
}

BGInstallTabs({ items }: { items: BGInstallTab[] })

Small mono kicker above a heading, with the blue dot.

interface Props {
  class?: string;
}

Numbered section heading: kicker, title, lead.

interface Props {
  eyebrow: string;
  title: string;
}

Section break: a hairline fading out at both ends.

(no props)

The small copy pill wired to the page's copy handler (data-copy).

Not final: aria-label is passed as a raw string prop.

interface Props {
  value: string;
  label?: string;
  swap?: "on" | "off";
  "aria-label"?: string;
  class?: string;
}

Pill-shaped one-line command with a prompt sigil and a copy button.

interface Props {
  command: string;
  copyLabel?: string;
}

Big gradient number over a short label.

interface Props {
  value: string | number;
  label: string;
}

One colour of the home strip: grows on hover, copies its hex.

interface Props {
  name: string;
  hex: string;
}

Palette card: colour plate with its contrast ratio, name and source.

interface Props {
  name: string;
  color: Color;
}

Endless strip of names, pauses on hover.

interface Props {
  items: string[];
}

Fake editor window painted with the syntax roles, optional terminal strip.

// main.ts — colours, not a screenshot.import { greet } from "./hello"; type User = { id: number; name: string }; const ENDPOINT = "https://api.example.com/users"; export async function main(ids: number[]): Promise<void> {  const res = await fetch(ENDPOINT);  if (!res.ok) throw new Error(`users: ${res.status}`);  const all: User[] = await res.json();  const picked = all.filter((u) => ids.includes(u.id));  picked.forEach((u) => greet(u.name));}

interface Props {
  terminal?: boolean;
}

Every palette colour's contrast on the background, with its WCAG band.

(no props)

A palette-page section: heading with a count, then its content.

interface Props {
  id: string;
  title: string;
  count?: number;
}

App grid filter: chips that hide cards by data-card-kind.

interface Props {
  kinds: string[];
}

One app in the home grid, with its check level and the pointer glow.

Not final: takes the raw Target record from data/targets.ts.

interface Props {
  target: Target;
  index: number;
  base: string;
}

Media beside its instructions from 1024px, stacked below; the media stays first in the DOM.

interface Props {
  split?: boolean;
  class?: string;
}

Bigface / Apps / name trail.

interface Props {
  base: string;
  name: string;
}

“Published” strip for targets listed in their app's own gallery.

Not final: label / url / name mirror the Target.market fields one by one.

interface Props {
  label: string;
  url: string;
  name: string;
}

A download link styled as a small card.

interface Props {
  href: string;
  label: string;
  detail: string;
  class?: string;
}

“Do it by hand” fold with numbered steps.

interface Props {
  steps: string[];
}

A block of code with its path and a copy button.

const palette = "bigface";

interface Props {
  path: string;
  code: string;
  truncated: boolean;
}

Link card to the next page in a sequence.

interface Props {
  href: string;
  name: string;
}

Home hero: pitch, actions, install line and the parallax stage.

Not final: page-specific props (base, repo, ports, command).

interface Props {
  base: string;
  repo: string;
  ports: number;
  command: string;
}

App page header: kind, port number, name, tagline, check level.

Not final: takes the raw Target plus a pre-computed label string.

interface Props {
  target: Target;
  index: number;
  total: number;
  levelLabel: string;
}

Sticky site header: skip link, brand, main nav.

Not final: base / repo are passed as plain strings on every page.

interface Props {
  base: string;
  repo: string;
}

Site footer: the mark, a one-line pitch, the footer nav.

Not final: base / repo / ports are passed as plain strings.

interface Props {
  base: string;
  repo: string;
  ports: number;
}

The copy confirmation (one per page, #toast).

(no props)

Literal text-bf-* class per palette colour, so Tailwind's scanner sees every one.

// Literal Tailwind class names per palette colour. They are spelled out (not built from strings) so
// Tailwind's scanner sees every one; anything that colours text by palette name goes through here.
export const bgTextClass: Record<string, string> = {
  bg: "text-bf-bg",
  fg: "text-bf-fg",
  fgDim: "text-bf-fg-dim",
  border: "text-bf-border",
  borderMuted: "text-bf-border-muted",
  selection: "text-bf-selection",
  cursorLine: "text-bf-cursor-line",
  braceMatch: "text-bf-brace-match",
  blue: "text-bf-blue",
  lightBlue: "text-bf-light-blue",
  paleBlue: "text-bf-pale-blue",
  cyan: "text-bf-cyan",
  green: "text-bf-green",
  lime: "text-bf-lime",
  yellow: "text-bf-yellow",
  brightYellow: "text-bf-bright-yellow",
  burntOrange: "text-bf-burnt-orange",
  purple: "text-bf-purple",
  comment: "text-bf-comment",
  caret: "text-bf-caret",
};