Design System

Latest updates

Releases of @major/ui and changes to the guidelines. Release entries come from Changesets; products upgrade with yarn upgrade @major/ui or Renovate.

  1. v0.3.0

    Primitives and composed components

    • BreakingOne package: @major/tokens is part of @major/ui. Styles come from @major/ui/tailwind.css, one entry point per component (@major/ui/button).
    • BreakingComponents are composed from parts, as in shadcn/ui and the web app: Field + FieldLabel + Input instead of TextField, Select + SelectTrigger + SelectContent, Tooltip + TooltipTrigger + TooltipContent, Alert + AlertTitle. Icons go in children.
    • BreakingRenamed: IconButton → Button icon sizes, Tag → Badge, Notice → Alert, Toast → Sonner, TextField → Field, Radio → RadioGroup, ChoiceChip → Toggle and ToggleGroup, SegmentedControl → Tabs, Tabs → EditorTabs, Menu → DropdownMenu, ConfirmDialog → AlertDialog, Pagination → TablePagination, RunsChart → ActivityChart.
    • NewPrimitives: Card, Separator, Kbd, StatusDot, Label, Input, Textarea, InputGroup, Popover, Collapsible, Table, Island. Composed: PasswordInput, UsageMeter, DataTable on TanStack Table with sorting and expandable rows.
    • BreakingRadii are named by role: sm 4 · segment 5 · md 6 · row 7 · lg 8 · panel 10 · xl 12 · full. The text styles 2xs, ui-sm, nav, md, title-sm and display join the scale; the xs/sm/base/lg aliases are gone.
    • ChangedColours exist only as --color-* (var(--color-muted)), so a page's own --muted or --accent can't reach the components. Spacing gets p-space-N utilities. Spacing, radii and text sizes are in rem.
    • Fixedbubble is #ededed in light, as in the platform design; code is code-surface, no longer clashing with the text-code style. The page glow (island-glow, bg-page-glow) comes from the platform design.
  2. v0.2.0

    BarChart and RunsChart

    • NewBarChart: daily values over a period, stacked by up to three series in chart-1 → chart-3, with a dashed previous-period comparison and a keyboard-scrubbable tooltip.
    • NewRunsChart: the 7-bar mini chart of an agent's runs, with its hover card and the focus dim.
    • New@major/tokens: animate-mj-dim, the 600ms ease-in fade for focus dims.
    • Fixedcn() kept bg-transparent next to a fill class, so selected SidebarItems had no fill. Tailwind's colour keywords are now part of the merge config.
    • ChangedSidebarItem: top-level icons are 16px, matching the Figma library.
  3. v0.1.0

    First release of @major/tokens and @major/ui

    • New@major/tokens: 46 colour tokens in light and dark, 12 text styles, spacing, radius and shadows as CSS variables, a Tailwind v4 theme and typed JSON.
    • New@major/ui: Button, IconButton, Tooltip and Spinner, plus Inputs, Navigation, Feedback, Data, Overlays, Chat and Lists component groups.
    • NewIcons are passed as elements (icon={<Plus />}) so every component can be used from React Server Components.
    • NewPrecompiled @major/ui/styles.css for products that don't run Tailwind.
  4. Guidelines

    SidebarItem: parents with children

    • NewParents with children get a chevron, an open group with tree lines and a selected child; the parent goes back to unselected. New items carry the New pill.
  5. Guidelines

    Design system synced from the Major prototype

    • NewTokens, brand book and 55 component specifications captured from the Major prototype.
    • ChangedSelection has three looks by meaning: location is white, a choice is an outline with a check, form checks use link.