Components
Every component in @makeplane/propel — 62 in all, grouped by family. Each page shows the component live beside its source, with a props table generated from its real types.
Actions
- ButtonTriggers an action or event, such as submitting a form or opening a dialog.
- Button GroupA connected group of related buttons that share one size.
- Icon ButtonAn icon-only button for compact, labeled actions like adding, editing, or closing.
- Split ButtonA main action button paired with a chevron that opens a menu of secondary actions.
- Anchor ButtonAn action that reads as an inline text link, with the same conventions as Button.
- PillA pill-shaped button that holds a label with optional inline-start and inline-end icons.
- ToggleTwo-state pressed buttons — icon-only (`IconToggle`) or labeled (`Toggle`) with optional start/end icons.
- ShortcutDisplays a keyboard shortcut hint, such as "⌘ K", as a decorative visual cue.
Forms
- InputA single-line text field framed by a bordered group with room for inline icon slots.
- Input FieldA labeled single-line text field with optional hint and error messaging.
- Text AreaA multi-line text field framed by a bordered group, with configurable text size, surface, and resize behavior.
- Text Area FieldA labeled multi-line text field with optional description, hint, and error messaging.
- Number FieldA bounded numeric input with decrement and increment stepper buttons.
- OTP FieldA one-time-password field — a row of character slots that owns focus movement, paste, and completion.
- CheckboxLets a user toggle a single option on or off.
- Checkbox FieldA single checkbox laid out as a field row with label, description, and hint or error text.
- Checkbox GroupCoordinates a set of checkboxes as one shared selected-values group.
- Checkbox Group FieldA labeled fieldset of checkbox options with description and helper or error text.
- RadioLets a user pick one option from a set of mutually exclusive choices.
- Radio Group FieldA labeled fieldset of radio options with description and helper or error text.
- SwitchToggles a single setting on or off.
- Switch FieldA switch laid out as a field row with label, description, and hint or error text.
- SelectLets a user choose one option from a list in a popup.
- Select FieldA labeled select with description, popup options, and helper or error text.
- ComboboxA closed-field picker that selects one or more options from a searchable overlay panel — the same shell the dropdown menu uses.
- Combobox FieldA labeled multi-select combobox with title and description above a closed trigger, an overlay panel of searchable checkbox items, and helper or error text below.
- AutocompleteA searchable text input that suggests and filters matching options as you type.
- Autocomplete FieldA labeled autocomplete input with a filtered suggestion popup and helper or error text.
- Expandable SearchA collapsed icon trigger that expands into a search input on click.
- SliderA single-thumb control for picking a number within a range.
- FieldThe shared labeling and validation shell for composing a custom form control with a label, description, and error text.
- FieldsetGroups related fields under one accessible legend for the 90% case.
- FormA native form that consolidates server-style field errors and lays out its field and action regions with consistent rhythm.
Overlays & menus
- DialogA modal overlay for focused tasks and multi-step flows.
- Alert DialogA modal confirmation that requires an explicit user response before a destructive action.
- DrawerAn edge-anchored panel that slides in for details, navigation, and side tasks.
- PopoverA floating panel anchored to a trigger for arbitrary controls and content.
- TooltipA small popup that describes the element it is attached to, shown on hover or focus.
- Preview CardA non-modal rich preview that opens on hover or focus of an inline link.
- MenuA popup list of actions or options opened from a trigger.
- Context MenuA menu of actions that opens at the pointer on right click or long press.
Navigation
- TabsA set of layered sections that show one panel at a time.
- Navigation MenuA horizontal row of triggers and links that open portaled content panels for site navigation.
- ToolbarA row of grouped controls with a toolbar role and roving keyboard focus.
- BreadcrumbShows the path to the current page as a trail of navigable crumbs.
- PaginationNavigation for a paginated list or table with page numbers and prev/next controls.
Disclosure
Data display
- TableDisplays rows of data in columns, with optional sortable headers and pinned columns.
- ListA vertical roving-focus list of navigation and action rows, the primitive sidebars compose.
- AvatarShows a person's photo, falling back to initials or an anonymous person icon.
- Avatar GroupAn overlapping stack of avatars that share one size and show a "+N" overflow count.
- Workspace AvatarShows a workspace's logo in a rounded square, falling back to its colored initials.
- BadgeA small rounded pill of inline text for statuses, labels, and counts.
- CalendarA keyboard- and screen-reader-accessible date picker for single-date and range selection.
- Linear ProgressA horizontal progress bar driven by a value, with an optional trailing percentage and an indeterminate state.
- Circular ProgressA small progress ring driven by a value, with an indeterminate spinning state.
- IconA decorative glyph slot that renders an SVG icon, sized and tinted from its container.