The whole app frame in one file: a sidebar that collapses to a rail and widens over the page on hover, breadcrumbs from the nav, header menus, theme settings (mode, accent, density, fluid or boxed), a user menu, and a drawer when narrow.
Sidebar
Collapsible nav over a menu tree, nesting to any depth, with a mobile off-canvas and an icon-rail mode.
Topbar
Header bar composing breadcrumbs, notifications, appearance and account.
Nav Menu
Documentation-style side menu — plain text links under uppercase section headings, with an optional filter.
Breadcrumbs
Path-derived trail; segments are titled from a label map.
Tabs
Accessible tablist with roving focus and arrow-key navigation.
User Dropdown
Account menu showing roles and department, with sign-out.
Menu Icon
Resolves a stored icon NAME to a component, with a neutral fallback.
Theme Settings
Appearance panel: colour scheme and row density.
No visual preview
Theme Script
Inline pre-paint script that applies the stored theme before hydration, killing the dark-mode flash.
Idle Logout
Headless inactivity timer that calls a sign-out action.
Containers5
Card
The frosted panel surface, with optional header, actions and footer.
Splitter
Two resizable panes with a draggable, keyboard-nudgeable divider.
Accordion
Stacked sections that expand one at a time or several, with the WAI accordion keyboard.
Fieldset
A bordered group with a legend, optionally toggleable to collapse its content.
Divider
Horizontal or vertical rule, solid, dashed or dotted, with optional aligned content.
Buttons & actions4
Button
Four variants, three sizes, and a loading state that also disables.
Button Group
Joins buttons into one segmented control; also a single-choice SegmentedControl.
Split Button
A primary action joined to a caret that opens a menu of secondary actions.
Speed Dial
A floating action button that fans out into actions in a line, circle, semi-circle or quarter-circle.
Feedback4
Alert
Inline message for a condition the user must read before acting.
Empty State
Two-line placeholder for an empty list or table.
Progress
Determinate bar with a clamped value and optional label.
Skeleton
Loading placeholder in text, circle and rect shapes.
Text inputs8
Field
Label, control and error wired together — ids and ARIA included.
Input Group
Joins addons (text, icons, buttons, selects) before and after an input into one bordered control.
Icon Field
An input with an icon on either side, an optional clickable right-hand button, and a loading spinner.
Float Label
A label that rests inside the field as its placeholder and floats up on focus or value, in over, in and on-border variants. Pure CSS.
Ifta Label
An in-field, top-aligned label: small label and control inside one bordered box with one focus ring.
Input Mask
Masked input for phone numbers, dates and codes: 9, a and * slots, literals skipped as you type, and both the formatted and raw value.
Input Password
Password field with a show/hide toggle, a strength meter and an optional requirements checklist.
Input Color
Colour picker: a saturation square, hue and optional alpha sliders, a hex field and preset swatches; inline or behind a swatch trigger.
Choices5
Checkbox
Styled checkbox with label and an optional hint tooltip.
Radio Group
A group of radio buttons over real inputs, with a roving tab stop, arrow keys, hints and disabled options.
Toggle Switch
Labelled on/off switch.
Slider
Single value or range, horizontal or vertical, with pointer drag, full keyboard and an optional value readout.
Knob
A circular dial input: drag around the arc or use the keyboard, with a value template in the centre.
Selects & pickers6
Multi Select
Searchable multi-select with removable chips; disabled options stay visible.
Combined Select
Multi-group filter in one popover: parent-child narrowing, a measured chip row, or a fixed-height summary.
Autocomplete Dropdown
Single-select with type-ahead and optional option grouping.
Cascade Select
Single select over nested options: groups open flyout submenus, only leaves are picked, full keyboard.
Tree Multi Select Dropdown
Multi-select over a nested tree; ticking a parent selects its subtree.
Pick List
Two lists with transfer controls: pick from a set, then order what you picked.
Dates6
Date Picker
Single-date calendar with a per-date disable predicate.
Date Range Picker
Two-month range calendar with quick options. Controlled on ISO day strings.
Month Picker
Single-month select on `YYYY-MM` strings, clearable.
Month Range Picker
Month-granularity range picker with quick options.
Day Grid
The bare month-of-days grid with a weekday header, shared by both date pickers.
Month Grid
The bare 12-month grid with a year stepper, shared by both month pickers.
Filters & views9
Multilevel Menu
A cascading filter menu: each level opens beside the last, level with its row, and ends in searchable lists to tick — Select all, Clear, counts per branch, full keyboard, flips at screen edges.
Filter Panel
Lark-Base-style filter builder: `[field] [operator] [value]` rows matching all or any, with a value control chosen by the field kind. Drafts until Apply.
Condition Groups Builder
OR-of-AND condition groups, drawn from the filter panel's own rows. Stateless.
Sort Panel
Sort by up to three columns, each direction labelled by what it means ("Old → New", not "desc").
Group Panel
Group by up to three fields, each with its own direction; levels reorder by drag.
Fields Panel
The Lark-Base "Fields" panel: search columns, show or hide each with an eye, drag to reorder, click a name to edit it, and "New field" at the foot. Commits as you click.
Field Editor
The "Edit field" form: a name, a type from the full list, and options with colours. Opens as an AnchoredPanel where the column is.
Color Rules Panel
Conditional colouring: a filter predicate with a tone, painting a cell or a whole row. First match wins.
View Tabs
Tabs of saved views: mode icon, rename in place, duplicate, delete, drag to reorder, and + for a grid or a board.
Tables5
Data Table
Sorting, optional selection and optional paging over a column array.
Base Table
The whole Lark-Base table in one component: saved views (grid or board) in tabs over a BaseGrid, with every grid feature. The unit to copy into another project.
Base Grid
A Lark-Base-style grid: fields, filter, group, sort and colour over a table with in-place cell editing, a record panel per row, pinned rows, frozen columns, and headers you drag to reorder or resize.
Pivot Table
A spreadsheet-style pivot: drag fields into Filters, Columns, Rows and Data in a side panel that leaves the table its full width; nested headers, subtotals, grand totals, collapsible groups, value filters and CSV export.
Pasteable Grid
Spreadsheet-style grid: paste a block of cells, map columns by header alias, keyboard navigation, column summaries.
Table parts5
Pagination
Numbered page links with ellipsis gaps, or a page-number input. Four props for the common layout, or composable parts when the layout is the point.
Editable Cell
Click-to-edit cell with dirty state, commit/cancel keys and a no-jump overlay input.
Account Cell
Identity cell: a name with its group and category beneath.
Group Band Row
The group header band inside a table: label pinned to the visible edge, a real count and a collapse chevron.
Save All Bar
Sticky bar shown while rows are dirty: save all or discard all.
Lists & trees3
Sortable List
Drag-to-reorder list, generic over the item type, with an explicit grip.
Tree
Hierarchical list with expand/collapse, single, multiple or tri-state checkbox selection, a filter that keeps ancestors, lazy children and the full WAI tree keyboard.
Organization Chart
Top-down chart of people or units joined by connector lines, with collapsible subtrees, selection and a custom node template.
Charts14
Chart Card
The frame every chart sits in: title with an ⓘ hint, legend, and a chart/table toggle so no value is only readable by hovering.
Bar Chart
Columns or bars comparing magnitude across categories — grouped, stacked, or horizontal for long names.
Line Chart
Lines for change over time on one axis, with a crosshair tooltip; can emphasise one series and grey the rest.
Area Chart
A trend where the filled volume matters — one series, or several stacked into a total.
Donut Chart
Part-to-whole at a glance, capped at six slices with the rest folded into Other; every slice listed with value and share.
Scatter Chart
Two measures per item and how they relate, for up to three groups.
Heatmap
Magnitude over a grid — activity by weekday and hour — in one hue from near-zero to most.
Funnel Chart
Stages that each narrow the last, with conversion from the previous stage and from the top.
Diverging Bars
Above or below a baseline — change against target — in two opposing hues around a zero line.
Sparkline
A word-sized trend for a stat tile or table cell: grey history, accented current point.
Trend Chart
Multi-series daily line chart.
Retention Chart
Monthly rate chart that leaves null periods as gaps rather than zeroes.
Ranked Bars
The same ranking as horizontal bars, for short named lists.
No visual preview
Chart Theme
Hooks returning the validated chart palette (categorical, ordinal, sequential, diverging) and the axis, grid and tooltip colours for the active scheme, plus number formatters.
Metrics & status6
KPI Tile
A KPI card with tone, delta arrow and optional subtitle.
Status Bar
Proportional bar of per-status counts.
Status Steps
Horizontal progress dots for a lifecycle, including skipped states.
Badge
Status pill in five tones, with an optional state dot.
Option Pill
A select option as a tinted pill from the seventeen-tone palette, or a removable chip.
Avatar
Circular avatar with an initials fallback derived from name or email.
Dialogs & popovers7
Modal
Centred dialog in ten sizes: drag it by the title bar, resize it from any edge or corner; Escape closes it, a click outside does not.
Multilevel Dialog
A dialog that opens dialogs: one backdrop, levels underneath recede, a breadcrumb and back arrow, one Escape closes one level; drag the stack, resize each level, and a click outside closes nothing.
Drawer
Right-hand slide-over, resizable by its left edge, with a footer slot.
Anchored Panel
A dialog that opens beside what it edits and can open another beside itself: placement avoids open panels, Escape closes only the topmost.
Confirm Popover
Inline confirm anchored to its trigger, portalled so a table shell cannot clip it.
Context Menu
Right-click menu with icons, shortcuts, separators and nested submenus; portalled and kept inside the viewport. useContextMenu wires table rows.
Tooltip
Portal tooltip that flips on overflow, opens on hover AND focus, and wires `aria-describedby`.
Notifications & activity3
Notification Bell
Unread badge and dropdown, with optimistic mark-as-read.
Notification Card
One notification row: type icon, actor, reference and relative time.
Activity Feed
Reverse-chronological event list with per-type phrasing.
Media3
Media Library
Searchable media picker with grid and list views, drag-and-drop upload, and icon fallbacks.
Carousel
Paged slider over any items: several or fractional per view with a peek, start or centre alignment, variable-size slides, circular, autoplay with a pause button, dots, swipe, vertical, and responsive to its own width.
Gallery
Image gallery with a main stage, a thumbnail strip on any side, captions, indicators and a fullscreen lightbox.