Components
55 components in @major/ui. Each page has two halves: Usage (examples and the rules for using it) and API (import, props, accessibility).
Primitives
No product meaning, composed from parts like shadcn/ui: Dialog + DialogContent + DialogTitle, Field + FieldLabel + Input. Build every screen from these.
Inputs
FieldA labelled control: label above, the control, then a hint or an error; or a check with its label beside it.InputThe 34px text field, matching Medium buttons and Selects.TextareaThe multi-line field: 76px tall at least, resizable vertically.InputGroupAn input with things attached: an icon, a clear button, a key hint, a fixed suffix.SelectA field that opens the menu sheet with the current option checked.CheckboxA square check for turning several independent options on or off.RadioGroupA round choice for picking exactly one option from a short visible list (2 to 5).SwitchAn on/off toggle for a single setting that applies immediately.SliderA range for a number where the rough value matters more than the exact one.ToggleOne on/off button: the choice chip, or a quiet icon or text toggle.ToggleGroupA wrapping set of choice chips for picking answers or filters.
Navigation
AccordionSections that open to reveal more: stacked in one card, or a quiet Advanced settings toggle.CollapsibleA single region that shows and hides. Unstyled: the caller draws the trigger and the region.TabsOne of a few mutually exclusive options set in place, always one selected: Monthly · Annual, Production · Staging.IslandThe panel a page sits on: the darker home panel with its glow, or the plain editor panel.
Feedback
AlertAn inline message about what is true now: info, success, warning, destructive.BadgeSmall labels and counts: version state, New, Managed, an unread count.StatusDotA 7px dot and a short label: healthy, needs attention, failing, paused.SonnerToasts: a short past-tense confirmation at the bottom centre after an action.ProgressA 4px bar for a known amount of work.SkeletonPlaceholder bars while content loads, in the layout of what's coming.
Data
AvatarA person: initials on a tinted circle or a photo, and the overlapping stack.CardThe surface for things that sit on the page: list cards, catalog cards, settings sections.SeparatorA 1px rule, only where a visible line carries meaning.KbdOne keyboard key in a hint: /, ⌘K, Esc.TableSemantic table parts: a 36px header, 56px rows with line dividers and a hover fill.
Overlays
TooltipThe name of an icon-only control, or a short fact about something truncated.DropdownMenuThe one menu sheet for overflow, sort, filter, mentions and pickers.PopoverAn anchored, non-blocking surface: the publish panel under its button, a mention's details.DialogA focused task over a dimmed page: invite members, connect a service, share.AlertDialogThe blocking question before anything that can't be undone: delete, disconnect.
Composed
Built from primitives for one recurring Major need: the page header, the data table, the agent's trace. Use them instead of rebuilding the same thing.
Inputs
Navigation
EditorTabsThe tab strip above the editor: the agent or skill tab plus the apps opened from it.ViewSwitcherThe views of an editor or detail page; only the selected view shows its label, and views that don't fit go in a menu.PageHeaderThe top of every page, sticky in its Island: a list header or a detail header.TablePaginationPaging under a long table: the range, previous and next, optionally rows per page or page numbers.SidebarItemRows, sections and nested groups of the home and settings sidebars; location is white, never green.
Data
BrandTileThe mark of a connector, service or org: a letter tile in the brand colour, or an icon tile.DataTableA TanStack table on the Table parts: sortable headers, rows that expand in place, loading skeletons.StatStripA row of key numbers at the top of a page or chart.UsageMeterA labelled Progress bar: “Storage used”, “1.4 GB of 10 GB”.BarChartValues per day over a period, optionally stacked by what they're made of.ActivityChartA mini bar row of activity over a short window that opens the same window large on hover.SettingsSectionThe building block of settings pages: a card of rows, label and description left, one control right.
Chat
ChatMessageOne turn in the chat panel: the person's bubble or the agent's reply.ComposerThe message box at the bottom of the chat panel.TraceThe agent's steps, one line each, shown above its reply; a summary line opens them.ObjectChipAn agent's connectors, applications, skills and variables as chips: in the Details panel, or inline in text.
Specified, not yet in the package
These are in the Major design system but are product-specific. They'll move into @major/ui when a second product needs them; until then build them in the product from the spec in reference/major-ds.
AccessPickerInputsWho can use something, set right in a table row.
PlanCardDataA plan in Plans & Billing.
ManagedServiceCardListsA service Major runs for you, above the connectors table.
PublishDialogOverlaysPublishing an app: version, address, progress, live.
WhatsNewOverlaysThe two-pane release-notes dialog.
CanvasStepEditorA step on the workflow canvas.
DiffViewEditorWhat changed in a version, per file.
FileTreeEditorA folder tree or a version list.
QuestionsChatMajor asks two or three questions before building.
PepperCard / PepperBubblePepperPepper's page cards and speech bubble.
BoxFieldBrandThe animated background behind the Login card.