Skip to content
SproutAceve · v3.33.1
Overview What is your role? Connect to Sprout MCP reference Adopting Sprout
Brand & logos Color Typography Spacing & layout Elevation Iconography Accessibility
Overview Alert Avatar Badge Breadcrumb Buttons Cards Checkbox Data grid Dialog Dropdown button Fab button Floating tabs Inputs Menu Navigation Numeric input Progress bar Progress ring Radio button Ribbon toolbar Switch Tabs Tag Tooltip
Interaction & motion Voice & content Product patterns
AI patterns AI transparency & disclosure AI disclosure label AI labels in marketing
Design principles Personas Trust and ethics Meet the makers
Build the systemplay Tower of tokensplay Site runnerplay
How it works Changelogv3.33 Roadmap Contribute
Components

Component coverage.

Every Sprout component and where it stands today. Ready describes the specification — documented, accessible, settled. Whether there is a React component to import is a separate question, and only 7 of the 40 answer yes; every card says which, so you know before you plan the work whether you are importing something or building it from tokens.

10 Ready
25 Beta
5 Planned
0 Deprecated
7 in code
ButtonsReady

Primary, secondary, subtle and destructive — full state matrix.

<AceveButton />
Since v3.2Open
InputsReady

Text fields with label, helper, error and disabled states.

<AceveInput />
Since v3.2Open
CheckboxReady

Accessible checkbox with indeterminate state.

<AceveCheckbox />
Since v3.3Open
SwitchReady

On/off toggle wired with role="switch".

<AceveSwitch />
Since v3.3Open
Data gridReady

Dense, keyboard-navigable table for cost work.

No primitive — build from tokens
Since v3.3Open
Ribbon toolbarReady

Above-the-canvas grouped command toolbar.

No primitive — build from tokens
Since v3.1Open
SidenavReady

Always-visible vertical product navigation.

No primitive — build from tokens
Since v3.1Open
CardsReady

Surface container built on the elevation tokens — media, title, subtitle, badges, body and one action, every slot optional except the title.

No primitive — build from tokens
Since v3.2Open
DialogReady

Modal dialog with focus trap and scrim.

No primitive — build from tokens
Since v3.4Open
AI disclosure labelReady

Marks AI-generated content — required under EU AI Act Art. 50.

<AceveAiDisclosureLabel />
Since v3.16Open
Button groupBeta

Segmented row of related actions sharing one border.

No primitive — build from tokens
Since v3.20
Dropdown buttonBeta

Default action with an attached menu of variants.

No primitive — build from tokens
Since v3.20Open
Icon buttonBeta

Icon-only action for toolbars and dense rows.

No primitive — build from tokens
Since v3.20
Fab buttonBeta

Floating action button for the one primary action on a mobile surface.

No primitive — build from tokens
Since v3.20Open
Radio buttonBeta

Single-choice control for a mutually-exclusive group, shipped as a real AceveRadio primitive.

No primitive — build from tokens
Since v3.31.0Open
SelectBeta

Single-choice dropdown for a known, closed option list.

No primitive — build from tokens
Since v3.20
TextareaBeta

Multi-line text field in S, M and L, with the full state set.

No primitive — build from tokens
Since v3.20Open
Numeric inputBeta

Quantities, cost and VAT — five kinds of number, three sizes, stepper buttons for small counts only.

<AceveNumericInput />
Since v3.13Open
Progress barBeta

Determinate and indeterminate status bar, six colours, four track heights. No React primitive yet.

No primitive — build from tokens
Since v3.31.0Open
Progress ringBeta

Circular determinate and indeterminate status indicator, six colours, two sizes. No React primitive yet.

No primitive — build from tokens
Since v3.31.0Open
BreadcrumbBeta

Hierarchy trail for pages reached deep in the product. Link colour fails AA contrast — documented, not yet fixed.

No primitive — build from tokens
Since v3.26Open
TagBeta

Compact classification label in five colour variants — anatomy, do/don't, a draft React API, and a spacing inconsistency flagged, not replicated silently.

No primitive — build from tokens
Since v3.30Open
List itemBeta

The row primitive behind lists and pickers — leading icon or avatar, text block, trailing action.

No primitive — build from tokens
Since v3.20
MediaBeta

Image and video container with fixed aspect ratio and a fallback state.

No primitive — build from tokens
Since v3.20
CarouselBeta

Horizontally paged content set with keyboard and swipe navigation.

No primitive — build from tokens
Since v3.20
DrawerBeta

Right-anchored panel for details and editing.

No primitive — build from tokens
Since v3.3Open
TabsBeta

Horizontal tab set — API still settling.

No primitive — build from tokens
Since v3.5Open
Floating tabsBeta

Pill-shaped view switcher for the mobile app. Colours are raw hex, pending brandSurface tokens.

<AceveFloatingTabs />
Since v3.22Open
Context menuBeta

Right-click / overflow command menu.

No primitive — build from tokens
Since v3.4Open
AlertBeta

Six severities, an optional Filled treatment, and a variant bar that never carries meaning alone.

No primitive — build from tokens
Since v3.20Open
AvatarBeta

Image, initials and icon fallbacks across the size, shape and style set.

No primitive — build from tokens
Since v3.20Open
BadgeBeta

Short status and count marker in six colours and three shapes.

No primitive — build from tokens
Since v3.20Open
Skeleton textBeta

Line placeholder that holds text layout while content loads.

No primitive — build from tokens
Since v3.20
Skeleton buttonBeta

Button-shaped loading placeholder, sized to the button it replaces.

No primitive — build from tokens
Since v3.20
TooltipBeta

Hover and focus hint for a control with no visible label — location, placement, the tip, and a draft React API.

No primitive — build from tokens
Since v3.20Open
Plan cardPlanned

Shows what an AI action will do, its sources and reasoning, before it runs.

RoadmapOpen
Confidence indicatorPlanned

Visible uncertainty state for AI output — never a bare percentage.

RoadmapOpen
ToastPlanned

Transient notification — used internally, not yet documented.

Roadmap
Date pickerPlanned

European-format date selection.

Roadmap
ComboboxPlanned

Autocomplete select with free text. Use Select for a closed option list — that one ships today.

Roadmap
← PreviousAccessibilityNext →Alert
Sprout · Aceve Design System · v3.33.1
Figma library GitLabReleases