Components Cheatsheet
Click props to toggle them on/off, cycle through variants, or edit string values. Use the component names and prop values exactly as shown when prompting.
AppLayout
import AppLayout from "@/components/layout/AppLayout"Root shell for every page. Pass leftSidebar / rightSidebar content to show those panels — omit to hide them.
| Prop | Values / Type | Default |
|---|---|---|
children | ReactNode — main page content | required |
leftSidebar | ReactNode — omit or null to hide | — |
rightSidebar | ReactNode — omit or null to hide | — |
topBarLeft | ReactNode — replaces breadcrumb area | — |
topBarRight | ReactNode — replaces search/user area | — |
Kbd
import Kbd from "@/components/ui/Kbd"Keyboard key cap. Compose multiple Kbd side-by-side to show a shortcut combo.
textsizeiconTextField
import TextField from "@/components/ui/TextField"Controlled input. Extends all native <input> props (value, onChange, type, name, autoComplete…). States are CSS-driven — no state prop needed.
labeldescriptionplaceholdererroroptionalonClearaisolidBgdisabledSelect
import Select from "@/components/ui/Select"Styled wrapper around a native <select> — hover/focus states are CSS-driven. Pass options as { value, label }[] and control value + onChange yourself. Use multiple for multi-select pill mode.
labeldescriptionplaceholdererroroptionalmultiplesolidBgdisabledoptionsvalueonChangeSelectUnderline
import SelectUnderline from "@/components/ui/SelectUnderline"Compact inline select — no border box, just text + chevron + dotted underline. Placeholder state is italic/muted; a selected value renders as regular white text. Designed for embedding inside sentences or compact UI.
placeholderdisabledoptionsvalueonChangeSwitch
import Switch from "@/components/ui/Switch"Toggle switch built on a hidden native checkbox. Uncontrolled by default — pass checked + onChange for controlled usage. Providing description switches to the card (Switch box) layout.
labellabelPositiondescriptionboxStyledisabledcheckedonChangeCheckbox
import Checkbox from "@/components/ui/Checkbox"Wraps a native <input type="checkbox"> with a custom 16×16 px box. Fully controlled via checked + onChange, or uncontrolled via defaultChecked. All native input props (name, value, form…) are forwarded.
labeldisabledcheckeddefaultCheckedonChangename / valueRadio
import Radio from "@/components/ui/Radio"Wraps a native <input type="radio"> with a custom 16×16 px circle. Group radio buttons by sharing the same name prop. All native input props are forwarded.
disabledlabelnamevaluecheckedonChangeTextarea
import Textarea from "@/components/ui/Textarea"Controlled multi-line input. Extends all native <textarea> props (value, onChange, name…). States are CSS-driven — no state prop needed.
labeldescriptionplaceholdererroroptionalaisolidBgrichTextEditordisabledEditorInputs
import EditorInputs from "@/components/ui/EditorInputs"Compact label + input row for use in properties panels and editor sidebars. Horizontal layout puts the label on the left (max 120 px) and the input on the right (130 px fixed). Vertical stacks them full-width.
typelayoutlabeltooltipplaceholderextraTextdisabledvalueonChangeoptionsselectOptionscolorfileNamethumbnailAlert
import Alert from "@/components/ui/Alert"Inline contextual alert. Not a toast — renders in the document flow.
Don't play with matches
If you play with matches, you might accidentally burn something down!
severityvarianttitledescriptionicondismissablebuttonLabelcustomIcononDismissonButtonClickPersona
import Persona from "@/components/ui/Persona"Avatar + name row. 7 standard sizes; falls back to initials when no src is provided.
sizenameusernamesecondaryInfotertiaryInfostatussrcaltDropdown
import Dropdown, { DropdownSeparator } from "@/components/ui/Dropdown"import DropdownItem from "@/components/ui/DropdownItem"Floating panel shell. Compose with DropdownItem and DropdownSeparator — positioning is up to the caller.
Navigation
titlesearchvariantlabeldescriptionicondangerselecteddisabledhasChildrenTabBar
import TabBar from "@/components/ui/TabBar"import TabBarItem from "@/components/ui/TabBarItem"Compose TabBarItem children inside TabBar. TabBar owns no selection state — manage active index externally.
varianticoncountnotificationlabelactivedisabledDivider
import Divider from "@/components/ui/Divider"1 px horizontal rule. Add a label to split it into a line / text / line layout.
strengthlabelTooltip
import Tooltip from "@/components/ui/Tooltip"Wraps any trigger element. The tooltip appears on hover — no JS, CSS-only.
Tooltip title goes here
contentplacementchildrenModal
import Modal from "@/components/ui/Modal"Controlled by an open prop. Renders a fixed backdrop + centered panel. Click backdrop or × to close.
titledescriptiondismissableshowFooterprimaryLabelsecondaryLabelonPrimaryonSecondarychildrenChip
import Chip from "@/components/ui/Chip"Pill-shaped label with optional left/right icons and a remove button.
labelcolorsizeleftIconrightIcononRemoveFlashMessage
import FlashMessageProvider, { useFlashMessage } from "@/components/ui/FlashMessageProvider"// FlashMessageProvider is already mounted in app/layout.tsxToasts stack bottom-right, animate in from below, and auto-dismiss after 5 s. Add FlashMessageProvider once at the root; call useFlashMessage().show() anywhere.
severitytitledescriptionbuttonLabelonButtonClick