Raft Design System

The design system used to build Raft: guidelines, design tokens and raft-ui, the React components that implement them.

Button

Checkbox

Desktop notifications
Marketing updates

Switch

DropdownMenu

Right click thread
Thread actions

ContextMenu

Tooltip

Popover

Follow up with @Atlas

PreviewCard

Dialog

AlertDialog

Label

Visible in the project switcher.

Field

Input

$USD

InputGroup

Combobox

ComboboxSelect

Select

RadioGroup

SegmentedControl

23/120

Textarea

SavedNewLiveFailed
ApprovedOnlinetask #42 @bugen

Badge

+3

Avatar

Setdata-invalidwithdisabledstate.

InlineCode

npx @botiverse/raft-daemon@latest --server-url https://api.raft.build

CopyableCode

Copy link⌘C
Cmd K
Command menu⌘K

Kbd

Workspace updates

3 unread messages

raft-ui@0.0.1

Ready for review

Text

Status

Skeleton

Syncing

Spinner

Channel details

Shared dividers for panels, menus, and form breaks.

Separator

Banner

No messages yet
Conversations you start will show up here.

EmptyState

Notifications2 items
  • Runtime stalled
    Atlas has not reported activity for 15 minutes.
  • Deploy completed
    raft-ui shipped to production.

NotificationCenter

Toast

Overview
Messages

Tabs