Review changes
The latest request is waiting for your review.
Needs review
Components
A usable Lustro component catalog. These are interactive examples, not a dependency on Bootstrap. Each family has a role, a state, and a keyboard path. The dark surfaces and accent tokens come from the Lustro foundation.
Production use
Examples show the visual contract. When you wire them to real data, keep validation, loading, disabled states, focus and announcements. Don't copy demo labels as product content.
Actions
Buttons
Primary is for one leading action per surface. Secondary is for peer actions. Destructive uses semantic red, never the brand gradient.
Button group
Button group chooses one mode; the adjacent dropdown holds secondary actions.
Dropdowns
More actions
Language select
A compact language switcher: a globe, the current language code and a chevron. Click it to open the list, move with the arrow keys, Home and End, press Enter to choose and Escape to close. The choice updates the code on the button; wire it to your i18n routing.
Pagination
Feedback
Alerts
Alerts occupy the page and stay until dismissed. Notifications need a clear source, severity and next action. Do not use color alone to explain the state.
Needs attention
Two checks are waiting for a review.
Saved
Your changes are up to date.
Toasts
A toast confirms a short-lived result; it must never be the only place for an error that needs fixing. Trigger several in quick succession: each one stays visible independently until dismissed or its six-second timer ends. Color, a label and a message communicate the variant together.
For production, keep independent IDs and timers so a new arrival never overwrites an earlier one. Render the stack in a portal above app content, cap its height and let it scroll on small screens. Keep errors that need user action inline too; the toast is only a short announcement. Respect reduced-motion when animating entry and exit.
Badge
DraftReadyRunningBlocked
Use a short label with text, not a color alone. The grouped demo below includes four states.
Progress
Progress has a value and a max; use an indeterminate loader only when no useful estimate exists.
Spinners/Loaders
Name the loading region for assistive technology.
Placeholders
Loading summary...
Skeletons reserve space while content loads; do not leave them in a permanent empty state.
Content
Card
Use a compact summary with a clear title, metadata and the next action; keep card links and nested buttons separate.
Ready to ship
Checks completed. The next step is a merge.
Ready
Accordion
Use the shared color, type and spacing tokens.
Breadcrumb
Navs & tabs
Overview: sample content for the selected tab.
List group
- 01 · Surface tokensDocs
- 02 · Component statesReady
Tables
See the full set at Tables.
| Component | Status | Owner |
|---|---|---|
| Buttons | Ready | Design |
| Notifications | Review | Product |
| Graphs | Example | Motion |
No results
Try a different search or clear your filters.
Form controls
Forms
Use descriptive labels, not only placeholders.
Overlays
Modal
Use a modal for a decision that cannot be made inline. In a production app, use the native modal API for Escape, focus trapping, and focus return. This guide shows the visual treatment only; close with its button or backdrop.
Tooltips
Tooltips add brief context, never required instructions.
Popovers
The adjacent disclosure stays open for longer text.
Más información
Layout primitives
Use responsive grid, stack and divider patterns before adding bespoke spacing. On mobile, cards become one column and tables scroll within their own frame. See Graphs and Motion for richer patterns.
Main content surface
Supporting content surface
ADAvatar + identityMetadata
More components
These patterns extend the existing Lustro catalog. The Felix atoms and molecules show related interaction choices, adapted here to Lustro rather than copied in Felix colors.
Carousel
A short series of related previews; arrows and dots remain keyboard-operable.
Overview
Start with the foundation.
Close button
Use an accessible name and a hit area large enough to tap. The toast is an illustration, not a destructive action.
Close a dismissible panel
Collapse
For one block of secondary detail, prefer native disclosure. Accordion above coordinates several blocks.
Mostrar detalles de entrega
Este contenido se puede abrir con Enter o Espacio y cerrar sin perder contexto.
Navbar and footer
A small responsive navigation preview. The menu button expands the links on narrow screens.
Offcanvas
A side panel keeps the main context visible. This demo closes from its button or backdrop. A production drawer must also trap focus, close on Escape and return focus to its opener.
Scrollspy
Select a section to bring it into view; the active state is also exposed as text.
Inicio
Sección inicio seleccionada.