C
amitshrivastavaa/creance
AgentHandoffBanneragent-handoff-bannerThe point where the agent hands control back: outcome, summary, next actions.
AgentRunLayoutagent-run-layoutThe run screen. It takes organisms as slots, so your app decides what goes where.
AlertalertA message in the page: what happened and what to do.
AppShellapp-shellThe frame of an app: sidebar, header, content and an optional aside.
ApprovalPromptapproval-promptOne specific action to allow or deny. A, Shift+A and D work while focus is inside it.
AvataravatarAgents are rounded squares; people are circles.
BadgebadgeA status as tone, icon and word.
BannerbannerA full-width notice in three tones.
BarChartbar-chartAmounts across categories. More than one series stacks.
BarListbar-listA ranking: a name, a bar and a value on every row.
BreadcrumbsbreadcrumbsWhere you are. Long trails fold the middle.
BrowserFramebrowser-frameA browser window drawn around a preview.
BudgetMeterbudget-meterSpend against a limit. It warns at 80% and flags going over.
ButtonbuttonA glass capsule. Blue is for the one primary action; red text marks refusal.
CalendarcalendarA day or a range. Arrow keys move by day, Page Up and Down by month.
CardcardA glass tile for grouping related content.
ChatchatA whole conversation with an agent: messages, suggestions and the input. Type something to try it.
CheckboxcheckboxA native checkbox with its label.
CheckpointRewindcheckpoint-rewindPick a point to roll back to and see what it undoes before confirming.
ChoiceboxchoiceboxCard-sized options for a choice that needs a sentence each.
ClearableInputclearable-inputA text field with a clear button that puts focus back in the field.
CodecodeInline code, or a scrollable block.
CollapsecollapseSections that open and close.
ComboboxcomboboxType to filter and pick one. Arrow keys move, Enter picks, Escape closes.
CommandMenucommand-menuSearch everything and act from the keyboard. Press ⌘K or Ctrl+K to see it in use: the search on this site is a CommandMenu.
ConfidenceMeterconfidence-meterHow sure the agent is: a range in words with reasons, never a percentage.
ContextCardcontext-cardA preview on hover or keyboard focus. Focus never moves into it.
ContextMenucontext-menuOpens on right-click, long-press, or Shift+F10.
CopyButtoncopy-buttonCopies text, shows a check for two seconds, and tells screen readers.
DescriptiondescriptionTerms and their values.
DestructiveActionModaldestructive-action-modalFor actions that cannot be undone. The red button stays off until the name is typed.
DialogdialogA question over a dimmed page. It traps focus and returns it when closed.
DiffLinediff-lineOne line of a diff, with line numbers and screen-reader text.
DiffReviewdiff-reviewA decision per hunk before anything lands. J and K move, Y and N decide.
DonutChartdonut-chartParts of a whole, with each slice’s value and share in the legend.
DotsMenudots-menuA "…" button with secondary actions for one row.
EmptyStateempty-stateAn empty list as an invitation to act.
EntityentityAn agent or a person as a row.
ErrorCarderror-cardA failure that needs a decision: what broke, the error, and what you can do.
ErrorMessageerror-messageWhat went wrong and what to do next.
FeedbackfeedbackThumbs up or down, then an optional comment.
FieldfieldA label, a control, and the hint or error that describes it, wired for screen readers.
FileTreefile-treeFiles and folders with change markers. Arrow keys walk the tree.
FleetSkyfleet-skyMany agents at once, as birds on lines back to you. The one that needs you flies in on a taut line.
FooterfooterThe end of a page: brand, groups of links, and a line for copyright.
GaugegaugeA ring that fills to a percentage. Red only past a limit you set.
IconButtonicon-buttonA button with only an icon. Its label is required and shows as a tooltip.
InputinputA text field.
JsonViewjson-viewJSON as a tree you can fold.
KbdkbdA keyboard key.
KeyboardHintkeyboard-hintA shortcut and what it does.
KillSwitchkill-switchHold for a second to stop the agent. Letting go early does nothing. Space or Enter held does the same.
LineChartline-chartA trend over time. Point at it, or focus it and press the arrow keys.
LoadMoreButtonload-more-buttonA full-width button under a list that says when it is loading.
LoadingDotsloading-dotsThree dots beside what is happening.
MenumenuActions behind a button. Put destructive ones last, after a separator.
MessagemessageOne turn. Yours sit right in a tile; the agent’s are plain text under its name.
MessageListmessage-listA scrolling column that follows new messages until you scroll up.
MiddleTruncatemiddle-truncateShortens the middle of a path or ID and keeps both ends.
ModelPickermodel-pickerChooses which model answers.
MultiSelectmulti-selectPick several. Picks become chips; Backspace removes the last one.
NavbarnavbarThe bar across the top. When it gets narrow, the links move into a menu.
NeedsYouInboxneeds-you-inboxEverything blocked on a person, across agents, most urgent first.
PaginationpaginationPage numbers, or a compact previous and next.
PermissionLedgerpermission-ledgerEverything you said "Always allow" to, how often it has been used, and a way to take it back.
PhoneFramephone-frameA phone drawn around content, to show a component at phone size.
PlanEditorplan-editorReorder, edit, remove and add steps before anything runs. Alt+Up and Alt+Down move a step.
ProgressBarprogress-barProgress toward a known total.
ProjectBannerproject-bannerA project-wide notice with one action.
PromptInputprompt-inputWhere you write to an agent. Enter sends; Send becomes Stop while it works.
QuestionCardquestion-cardWhen the agent needs information rather than permission.
RadioradioA native radio with its label.
RadioGroupradio-groupOne choice from a short list.
ReasoningreasoningThe agent’s thinking, folded away behind how long it took.
RelativeTimeCardrelative-time-card"2 hours ago", with the exact local and UTC time on hover or focus.
RiskLabelrisk-labelHow risky an action is, in words.
RunTimelinerun-timelineThe run's steps and tool calls. It follows the newest step until you scroll up.
ScrollerscrollerA horizontal strip that fades where there is more.
SearchInputsearch-inputA search field with a shortcut hint, a spinner and a clear button.
SelectselectThe native select, styled. The operating system draws the menu.
SeparatorseparatorA hairline between groups.
SheetsheetA panel that slides in from an edge.
ShowMoreshow-moreLong content cut to a few lines, with a button to show the rest.
SidebarsidebarLinks down the side, in groups. Collapses to icons that keep their names.
SkeletonskeletonA placeholder while content loads.
SlidersliderOne value, a range, or steps, read out in words.
SnippetsnippetShell commands with a copy button. The prompt sign is never copied.
SourcessourcesWhat an answer is based on, with numbered markers in the text.
SparklinesparklineA trend with no axes, for a table cell or a stat card.
SpinnerspinnerSomething is happening, with no known end.
SplitButtonsplit-buttonThe common action, with alternatives in a menu.
StatCardstat-cardOne number, what it is, and how it moved.
StatusBadgestatus-badgeA status with a running clock.
StatusDotstatus-dotA small mark and a word. Each status has its own shape as well as tone.
StepsstepsWhere someone is in a fixed sequence. Each status has a shape and a spoken label.
SuggestionssuggestionsStarting points above the input. Choosing one sends it.
SwitchswitchAn on/off setting that applies immediately.
TabletableSortable columns, row selection with Shift-click ranges, and bulk actions.
TabstabsA segmented control and its panels. Arrow keys move between tabs.
TextWithCopytext-with-copyText with a copy button beside it.
TextareatextareaA multi-line text field.
ThemeSwitchertheme-switcherLight, dark or match the system. This one really switches this page, starting from its current theme.
ToasttoastA short message that rises from the bottom. Call toast() from anywhere.
ToggletoggleA button that stays on or off.
ToggleGrouptoggle-groupA segmented control: pick one, or any.
ToolCallCardtool-call-cardOne tool call's whole life: input, result, errors and retries.
ToolCallHeadertool-call-headerNames a tool call and shows its state and attempt.
TooltiptooltipExtra text on hover and keyboard focus.
VideovideoA player with glass controls. It starts muted and never autoplays.