FRAME/12v0.1 · On Twos

Controlsregistry/ui/tag.tsx/r/tag.json

Tag

Flat inline highlighter strip (--f-marker background under --f-marker-ink uppercase monospace text).

← All Components
Light · Paper.f12-theme-light
Interactive preview
Example dataProduction · US-East12fps · On Twos
Dark · Flashback.f12-theme-dark
Interactive preview
Example dataProduction · US-East12fps · On Twos

Install & copy-in source

shadcn CLI (tag.json)
npx shadcn@latest add https://frame12.dev/r/tag.json
Usage example (Tag)
import { Tag } from '@/components/frame12';

export function EyebrowTag() {
  return <Tag>Example data</Tag>;
}
WCAG AAAccessibility guarantees

Accessibility notes

  • Maintains 14.8:1 contrast ratio in both light and dark themes because --f-marker-ink stays dark ink.
GrammarFRAME/12 rules

Design grammar

  • Marker yellow flags metadata and status callouts; it is never used as a text color or line stroke.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/tag.tsx)
PropTypeDefaultDescription
childrenReact.ReactNoderequiredShort metadata label rendered inside the marker strip.