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.
- Icon ButtonAn icon-only button for compact, labeled actions like adding or closing.
- Anchor ButtonAn action that reads as an inline text link, with the same conventions as Button.
- PillA pill-shaped button holding a label with optional inline-start and inline-end icons.
- ToggleA two-state icon button that stays pressed or unpressed when clicked.
- Toggle GroupA set of toggle buttons that share selection state, single or multi-select.
- ShortcutDisplays a keyboard shortcut hint, such as "⌘ K", as a decorative 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 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 slots that owns focus movement, paste, and completion.
- CheckboxLets a user toggle a single option on or off.
- Checkbox FieldA single checkbox 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 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 filterable input that selects one or more options from a list in a popup.
- Combobox FieldA labeled combobox with a filtered popup of selectable items and helper or error text.
- AutocompleteA searchable text input that suggests and filters matching options as you type.
- Autocomplete FieldA labeled autocomplete with a filtered suggestion popup and helper or error text.
- SliderA single-thumb control for picking a number within a range.
- FieldThe shared labeling and validation shell for composing a custom form control.
- FieldsetGroups related fields under one accessible legend for the 90% case.
- FormA native form that consolidates server-style field errors and lays out field and action regions.
Overlays & menus
- DialogA modal overlay for focused tasks and confirmations.
- Alert DialogA modal confirmation that requires an explicit response before a destructive action.
- DrawerAn edge-anchored overlay 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.
- MenubarAn application menu bar hosting a horizontal row of menus with single-open behavior.
- 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.
- 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 and pinned headers.
- 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.
- CalendarAn accessible date picker for single-date and range selection.
- MeterA static gauge that graphs a numeric value within a known range.
- Linear ProgressA horizontal progress bar driven by a value, with an optional trailing percentage.
- 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.