'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Components
Components overview
Alea's React components, by what they do. Each page has live examples, the props from the types, accessibility and keyboard notes, and its Figma counterpart.
101 pages
Actions 5
- ButtonStarts an action. Five looks for five jobs, three sizes, icons and a loading state.
- IconButtonA button with only an icon, for toolbars and compact places. Needs an aria-label.
- SegmentedControlOne choice among two to five options, shown as a row of pills. ToggleButton is the single on/off version.
- ButtonGroup and SplitButtonRelated buttons joined into one control, and a main action with a menu of related ones.
- ToggleGroup and ToolbarToggle buttons where one or several can be on, and a toolbar that is one Tab stop with arrow keys inside.
Typography 4
- Heading and TextHeadings in Crimson Pro or Inter, body text with tones, the eyebrow label, inline code and keys.
- LinkGoes somewhere. Inline in text, standalone, or muted, with external links marked.
- Blockquote and ListA quotation with its author, and styled lists with bullets, numbers or checks.
- ProseStyles long-form content you don't control element by element: articles, docs, Markdown, CMS HTML.
Layout 10
- Stack, Inline, GridSpace things out with the space scale: columns, rows that wrap, responsive grids, the page container and dividers.
- CardThe Alea panel: a rounded surface with a soft ring. Deep, outline and interactive versions.
- AppShellThe app frame: a sticky header, a sidebar that turns into a drawer on small screens, the main area and a skip link.
- SplitterTwo panes with a handle to resize them, by dragging or with the keyboard.
- Affix and FloatButtonKeep a toolbar in view once it reaches the top, and float a button over the page.
- AspectRatioKeeps media at a width-to-height ratio as it resizes.
- ScrollAreaA scrolling region with thin themed scrollbars and fades that show there is more.
- Masonry and ImageListCards of different heights packed into columns, and image galleries with captions.
- SpoilerLong content cut to a height with a fade and Show more.
- Responsive layoutValues per breakpoint for columns, spans, gaps and direction, Show and Hide, and hooks for the current breakpoint. All CSS, so the server and the browser render the same thing.
Forms 24
- TextFieldText input with label, help text, validation, prefix and suffix. TextArea for longer text, growing if you want.
- SearchField and PasswordFieldA search box with a clear button, and a password field with show and hide.
- NumberFieldNumbers with steppers, limits and locale formatting for currency, percent and units.
- CheckboxYes or no, or several choices from a list. Indeterminate for "some".
- RadioOne choice from a short list, as rows or as cards.
- SwitchAn on/off setting that applies right away.
- SelectPick one option from a list in a popover, with descriptions, icons, sections and disabled options.
- SliderPick a value or a range by dragging, with the value shown and formatted.
- ComboBox and TagFieldType to filter and pick one option, or several as removable tags.
- Dates and timesType a date or pick it from a calendar, ranges, times, all in the person's locale and calendar.
- FormValidation on submit, focus on the first problem, and server errors shown on their fields.
- FileUploadDrop files or browse for them, with sizes, progress and errors in a list.
- RatingStars to rate something, or to show a rating.
- ColorPicker and ContrastBadgePick a color by area, hue, hex or presets, and check its WCAG contrast as you go.
- OTPFieldOne-time codes in separate boxes; paste the whole code at once.
- CascaderPick from nested options column by column: country, then city.
- TreeSelectA select whose options are a tree, single or multiple.
- TransferMove items between two lists, with search.
- MentionsA text area where @ suggests people to mention.
- AutocompleteSearch with suggestions: static or loaded as people type, grouped, with matches highlighted and recent searches when empty.
- MultiSelectPick several options with checkboxes; the trigger sums up the picks. Search, Select all and Clear included.
- FieldsetGroups related fields under a legend, with an optional description, and can disable them all.
- MarkdownEditorWrite Markdown with a toolbar and shortcuts, preview it, and render it safely anywhere.
- EditableText that turns into a field when clicked: rename a project, a file, a title in place.
Overlays 6
- DialogA focused task on top of the page. AlertDialog confirms something that can't be undone.
- PopoverA floating panel next to its trigger, for small forms and extra details.
- TooltipA short hint on hover and keyboard focus.
- DrawerA panel that slides in from a side for filters, details or navigation.
- PopconfirmA small confirm next to the button that asks, for quick actions.
- HoverCardA rich preview on hover or keyboard focus: profiles, link previews, definitions.
Navigation 16
- TabsSwitch between views of the same thing. Underline or pills, horizontal or vertical.
- AccordionSections that expand and collapse: FAQs, settings groups, long details.
- BreadcrumbsWhere the page sits: a trail of links up to the current page.
- PaginationMove through pages of results, with the long middle collapsed.
- StepsProgress through a known sequence: done, current and upcoming steps, horizontal or vertical.
- MenuA list of actions or choices from a button: sections, shortcuts, submenus and checkable items.
- CommandPaletteEvery action and page, searchable from the keyboard with ⌘K.
- AnchorOn-page navigation that follows the section you are reading.
- ContextMenuA menu that opens where people right-click, long-press, or press Shift+F10.
- MenubarA desktop-app menu bar (File, Edit, View) with the full WAI-ARIA keyboard model.
- NavigationMenuA site header navigation with dropdown panels of links: mega menus with icons and descriptions.
- BottomNavigationThe tab bar of a mobile app: three to five destinations with icons, labels and badges.
- BurgerThe three-line menu button that turns into a close icon.
- SkipLink and VisuallyHiddenThe first link on the page jumps past the navigation; hidden text gives screen readers context the screen already shows.
- CollapsibleOne section that opens and closes, lighter than an accordion: advanced options, details, a long list.
- NavbarA site header with brand, links (with mega menus), and actions; below a breakpoint the links move into a drawer behind the burger.
Data display 18
- BadgeSmall labels for status, category and counts.
- TagRemovable or selectable tags: filters and chosen values.
- AvatarA person, as a photo or initials on a gradient, with status and groups.
- TableRows and columns with sorting, row selection, a sticky header, resizable columns and an empty state.
- ListViewA list of rich items to select, open or act on.
- TreeNested items that expand and collapse: files, categories, outlines.
- Descriptions and StatisticKey and value pairs, and big numbers with their change.
- TimelineEvents in order: a changelog, an order's progress, an activity feed.
- CarouselSlides you swipe or step through, with dots and an autoplay people can stop.
- ImageLazy images with a loading shimmer, a fallback, and a zoomable preview.
- QRCodeA QR code drawn as SVG, with an optional logo.
- CalendarViewA month of events, like a wall calendar.
- DataGridA complete data grid: search, sort, column visibility, density, selection with bulk actions, inline editing, pagination and CSV export.
- SortableList and KanbanBoardReorder items, or move cards between columns, by dragging or with the keyboard.
- VirtualListA list that only renders what is on screen, for thousands of rows.
- Ribbon and IndicatorA label around a card's corner, and a dot or number on the corner of an avatar or icon.
- Countdown and FormattedNumberTime left until a moment, and numbers formatted for the reader: currency, percent, compact.
- Status and ColorSwatchA colored dot with words for service health or presence, and a color sample with its name.
Charts 5
- LineChart and AreaChartValues over time, smooth or straight, with areas, stacking, a tooltip and a data table view.
- BarChartCompare categories: grouped or stacked, vertical or horizontal, with values on the bars.
- PieChart and DonutChartParts of a whole, with the share of each slice in the legend and the total in the middle.
- Scatter, Radar and HeatmapHow two measures relate, several measures at once, and intensity in a grid.
- Sparkline and GaugeA tiny trend line for tables and stat cards, and a half-circle meter for one measure.
Feedback 8
- AlertA message in the page: info, success, warning or danger, with actions.
- ToastA brief message that confirms something happened, with an optional action like Undo.
- Progress and MeterHow far a task has come, and how much of something is used.
- Spinner and SkeletonWaiting states: a spinner for short waits, skeletons for content that is on its way.
- EmptyState and ResultWhat to show when there is nothing yet, and the outcome of a flow or a page.
- TourA guided walk through a screen, one spotlight at a time.
- LoadingOverlayCovers a region while it loads, keeps the layout in place and tells screen readers it is busy.
- BannerA site-wide announcement bar above the header: launches, sales, maintenance.
Extras 5
- CodeBlock, CopyButton, SplitTextCode with a copy button, a copy button for any value, and a headline that rises in word by word.
- WatermarkA faint repeated text over content: drafts and confidential previews.
- ThemeProvider and toggleDark, light or system, remembered, with a toggle in two looks.
- Gradients and orbsThe Alea touches: gradient text, the gradient dot and the drifting orb background.
- PlaygroundEvery component in every state, dark and light side by side.