Live UI catalogue

Prototype design system.

Foundations, components, and patterns now live in separate pages so demos stay readable and reusable.

Back to home

UI Components

Source primitives for product interfaces.

Each card documents one source of truth, its variants, validation states, and a functional preview. Application pages must compose these components instead of recreating styles locally.

Form states

Form states are owned by the UI components. Product pages should pass state props such as required, invalid, helpText, and errorMessage instead of recreating field labels, badges, borders, or messages locally.

Design System/components/form-states.md

Required

Uses a small brand UiBadge beside the label and the native required attribute when the control supports it.

Invalid

Uses border-control-error, text-error, and aria-invalid.

Help text

Uses type-caption-medium and text-muted. It is linked to the control through aria-describedby.

Disabled

Disables interaction, lowers opacity, and keeps the component responsible for the disabled visual state.

Actions

UiButton

components/ui/UiButton.vue

Single button or button-link source for all interactive actions. Large is 40px, medium is 32px, small is 24px, and every size uses a pill radius.

Variants / props

variant: primary, secondary, ghost, danger, menu-actionsize: sm, md, lg, icon-sm, icon-md, icon-lg, icon, menu-actionleadingIcon, trailingIconto, href, type

States to validate

DefaultHoverFocus visibleDisabledaria-disabled for links

Known instances

components/patterns/AppHeader.vuecomponents/patterns/AppInteractiveCard.vuecomponents/patterns/AppUserMenu.vuelayouts/admin.vuepages/design-system/components.vue

Editorial variants

Action hierarchy

Show the button weights that should appear in product flows: one primary decision, supporting navigation, and quiet utilities.

Primary decision

Use once per decision area for the action that commits progress.

primarylgleading icon optional

Secondary path

Use for continuation, previews, and reversible next steps.

secondarymdtrailing icon

Quiet utility

Use ghost and compact icon actions for local tools.

ghosticon-smutility

Large

40px

Medium

32px

Small

24px

Forms

UiTextField

components/ui/UiTextField.vue

Standard text field with optional label, Lucide icon, and v-model.

Variants / props

type: email, number, password, search, text, urloptional labeloptional leadingIconrequired taghelpTextinvaliderrorMessage

States to validate

DefaultRequiredPlaceholderHelp textInvalidError messageFocusDisabled

Known instances

components/pages/EditorHomePage.vuepages/admin/index.vuepages/design-system/components.vuepages/design-system/patterns.vue

Editorial variants

Field states

Show the states product pages should request through props instead of recreating field markup locally.

Search field

Use a leading icon when the field filters a broad set.

type=searchleadingIcon

Required value

Show the required tag beside the label through the component.

requiredrequiredLabel

Invalid feedback

Keep the error border and message attached to the field.

errorMessagearia-invalid
Forms

UiSelect

components/ui/UiSelect.vue

Styled native dropdown for simple, stable choices.

Variants / props

optional labelrequired taghelpTextinvaliderrorMessageoptions disabledariaLabel without visible label

States to validate

DefaultRequiredHelp textInvalidError messageFocusDisabledOption disabled

Known instances

components/pages/EditorHomePage.vuepages/admin/index.vuepages/design-system/components.vuepages/design-system/patterns.vue

Editorial variants

Choice states

Use these examples to choose between a normal required choice, a validation state, and a disabled control.

FormatRequired

Required choice

Use when saving cannot proceed without a stable choice.

requirednative select
Language

Choose a language before saving.

Invalid choice

Use a nearby error message instead of page-level validation copy.

errorMessagearia-invalid
Disabled select

Disabled choice

Use when the value is visible but cannot be changed yet.

disabled
FormatRequired

Use selects for short, stable lists.

Language

Choose a language before saving.

Disabled select
Forms

UiCheckbox

components/ui/UiCheckbox.vue

Standard checkbox for enabling or disabling a boolean option, with an indeterminate state for multi-selection.

Variants / props

optional labeloptional descriptionindeterminateinvaliderrorMessagelabel slotariaLabel without visible label

States to validate

UncheckedCheckedIndeterminateInvalidError messageFocus visibleDisabled

Known instances

pages/design-system/components.vue

Editorial variants

Boolean choices

Show the small set of checkbox states that matter in workflows: selected, mixed, and invalid.

Checked option

Use when the recommended or current boolean value is true.

checkeddescription

Mixed selection

Use only for batch edits where selected rows differ.

indeterminatearia-checked=mixed

Invalid option

Use an inline message when at least one option is required.

errorMessage
Forms

UiRadio

components/ui/UiRadio.vue

Standard radio option for an exclusive choice within a value group.

Variants / props

optional labeloptional descriptioninvalidlabel slotariaLabel without visible label

States to validate

UncheckedCheckedInvalidFocus visibleDisabled

Known instances

pages/design-system/components.vue
Processing style
Forms

UiRadioGroup

components/ui/UiRadioGroup.vue

Exclusive choice composed with UiRadio, optional description, and v-model.

Variants / props

optional legendrequired taginvaliderrorMessagedescription per optionoption disabledgroup disabled

States to validate

UncheckedCheckedRequiredInvalidError messageHoverDisabled

Known instances

pages/design-system/components.vue
Display modeRequired
Validation state

Choose one display mode.

Disabled group
Controls

UiSegmentedControl

components/ui/UiSegmentedControl.vue

Compact exclusive control for switching between 2 to 4 visual modes or dense option sets.

Variants / props

items: label, value, icon, disabledsize: sm, mdoptional visible labelshowLabels true/falsedisabled group

States to validate

Selected itemInactive itemHoverFocus visibleDisabled itemKeyboard arrows

Known instances

pages/design-system/components.vue

Editorial variants

Mode switches

Use segmented controls for compact view or density choices where the selected state must stay visible.

Icon mode

Use for visual mode switches with obvious icon metaphors.

2-4 itemsaria-label
Density

Labeled density

Show labels when icons alone would slow recognition.

showLabelssize=sm

Disabled group

Disable the full group when the choice cannot be changed.

disabled

2 segments

Display

3 segments

Display

4 segments

Display

With text labels

Density
Structure

UiSurface

components/ui/UiSurface.vue

Reusable container for panels, cards, and canvas areas.

Variants / props

variant: panel, card, canvasas: section, article, div, or another semantic tag

States to validate

StaticLight/dark theme

Known instances

components/patterns/AppInteractiveCard.vuelayouts/design-system.vuepages/design-system/index.vuepages/design-system/components.vuepages/design-system/foundations.vuepages/design-system/patterns.vue

Editorial variants

Surface roles

Choose the surface by responsibility: section panel, standalone card, or nested canvas.

Panel

Grouped workflow.

Panel context

Use for grouped content sections and pattern shells.

variant=panelshadow-soft

Card

Standalone item.

Card item

Use for standalone repeated or scannable items.

variant=card

Canvas

Inset preview zone.

Canvas inset

Use for preview zones or nested neutral areas.

variant=canvas

Panel

Large page container or dominant section.

Card

Standalone content block.

Canvas

Framed area close to the page background.

Structure

UiCard

components/ui/UiCard.vue

Simple card with no intrinsic width, white background, rounded corners, and standard padding.

Variants / props

as: article, section, div, or another semantic tag

States to validate

StaticLight/dark theme

Known instances

components/pages/CatalogueHomePage.vuepages/design-system/components.vue

Simple card

No intrinsic width; the parent controls the grid.

Same component

White background, 16px radius, 24px padding.

Layout parent

Spacing comes from the external gap.

Structure

UiCardTitle

components/ui/UiCardTitle.vue

Standard title for cards, with controlled size and tone variants.

Variants / props

as: h2, h3, p, or another semantic tagsize: sm, mdtone: toned, highlighted

States to validate

StaticLight/dark theme

Known instances

components/pages/CatalogueHomePage.vuecomponents/patterns/AppInteractiveCard.vuepages/design-system/components.vue

Card title

The title style is centralized in UiCardTitle.

Navigation

UiAnchorToc

components/ui/UiAnchorToc.vue

Compact table of contents for in-page anchors, used by documentation layouts.

Variants / props

items: id + labeloptional titleoptional ariaLabeloptional activeOffset

States to validate

StaticActive sectionSmooth scrollHover linkFocus visibleLight/dark theme

Known instances

layouts/design-system.vuepages/design-system/components.vue
Typography

UiPageTitle

components/ui/UiPageTitle.vue

Large primary page title, using Heading XLarge, with no intrinsic margins.

Variants / props

as: h1, h2, or another semantic tag

States to validate

StaticLight/dark theme

Known instances

components/pages/CatalogueHomePage.vuecomponents/pages/EditorHomePage.vuepages/design-system/components.vue

Publications

Motion

UiContentTransition

components/ui/UiContentTransition.vue

Standard transition for replacing a content block with a subtle fade and vertical translation.

Variants / props

appear: false by defaultappear: true to animate the first render

States to validate

EnterLeaveReduced motion

Known instances

components/pages/CatalogueHomePage.vuecomponents/patterns/AppInteractiveCard.vuepages/design-system/components.vue
Preferences

UiThemeSwitch

components/ui/UiThemeSwitch.vue

Compact switch for toggling between light and dark themes.

Variants / props

Light themeDark themeCustom visible labels

States to validate

DefaultHoverFocus visibleChecked

Known instances

components/patterns/AppFooter.vuelayouts/design-system.vuepages/design-system/components.vue
Feedback

UiBadge

components/ui/UiBadge.vue

Compact pill for statuses, categories, tags, and visual metadata, with a dismissible option.

Variants / props

variant: brand, brand-soft, neutral, success, warning, danger, danger-solid, outlinesize: sm, mdleadingIcon / trailingIcon / trailingTextdismissible

States to validate

StaticDismissibleHover closeFocus visible closeLight/dark theme

Known instances

pages/admin/index.vuepages/design-system/components.vuepages/design-system/patterns.vue

Editorial variants

Tag tone

Treat badges as metadata: status tone, field requirement, or a removable filter.

Ready Review Blocked

Status tags

Use semantic tones for compact status metadata.

successwarningdanger
RequiredRecommended

Field tags

Use brand tags for required and recommended labels.

brandbrand-soft
This month Filter

Filter tags

Use outline or dismissible badges for active filters.

outlinedismissible

Small / Reference

RequiredRequiredRecommendedRequired in:x daysSmall tagSmall tagSmall tagSmall tagPublication typeThis monthSmall tagMissing file

Medium

Brand md Brand soft md Neutral md Success md Warning md Danger md Solid danger md Outline md

Dismissible

Brand dismissible Brand soft dismissible Neutral dismissible Success dismissible Warning dismissible Danger dismissible Solid danger dismissible Outline dismissible
Identity

UiAvatar

components/ui/UiAvatar.vue

Circular identity marker that renders initials, the user icon, or a photo.

Variants / props

variant: auto, initials, icon, photosize: sm, md, lgname / initialssrc / alt

States to validate

InitialsIcon fallbackPhotoLight/dark theme

Known instances

pages/design-system/components.vue

Editorial variants

Identity fallback

Show the fallback sequence before adding more identity variants: initials, generic icon, and size scale.

FM

Initials avatar

Preferred fallback when a trustworthy name is available.

variant=autoname

Icon avatar

Use when no name or photo can identify the user.

variant=iconlabel
CBCBCB

Size scale

Use sm, md, and lg without changing the visual language.

smmdlg
LSHélène Martel
LSLSLS
Feedback

UiStatusMessage

components/ui/UiStatusMessage.vue

Status message with semantic tone and matching Lucide icon.

Variants / props

tone: info, success, warning, danger

States to validate

StaticLight/dark theme

Known instances

pages/admin/index.vuepages/design-system/components.vue

Editorial variants

Inline feedback

Use status messages for visible feedback that belongs near the task area.

Add metadata before importing the file.

Info guidance

Use for neutral instructions or next steps.

tone=info

Import completed.

Success confirmation

Use for completion feedback that can stay inline.

tone=success

Review missing contributors.

Warning blocker

Use when the user needs to resolve a visible issue.

tone=warning

Standard informational message for context or help.

Operation completed and ready to be confirmed.

Attention required before continuing.

Error or blocking action to fix.

Documentation

UiInlineCode

components/ui/UiInlineCode.vue

Standardized inline code for paths, tokens, props, and technical values.

Variants / props

text/code slot

States to validate

StaticLight/dark theme

Known instances

pages/admin/index.vuepages/design-system/components.vuepages/design-system/foundations.vuepages/design-system/patterns.vue

Use type-body-medium-strong for an emphasized label and bg-surface-raised for an elevated container.

components/ui/UiInlineCode.vue
Iconography

UiIcon

components/ui/UiIcon.vue

Centralized Lucide wrapper with controlled sizes and accessibility.

Variants / props

name from icon-registrysize: xs, sm, md, status, lg, xl, 2xloptional labeloptional strokeWidth

States to validate

Decorative aria-hiddenInformative role img with label

Known instances

components/ui/*components/pages/EditorHomePage.vuecomponents/patterns/AppHeader.vuecomponents/patterns/AppUserMenu.vuelayouts/admin.vuelayouts/design-system.vuepages/admin/index.vuepages/design-system/components.vuepages/design-system/foundations.vue

Descending sort

arrow-down

Trending down

arrow-down-right

Back

arrow-left

Ascending sort

arrow-up

Neutral sort

arrow-up-down

Trending up

arrow-up-right

Global catalogue

book-copy

Catalogue

book-open-text

Sales

chart-no-axes-combined

Success

check

Open

chevron-down

Next

chevron-right

Close

chevron-up

Round warning

circle-alert

Round success

circle-check

Round help

circle-help

Round error

circle-x

Columns

columns-3

Data

database

External link

external-link

Filter

filter

Info

info

Dashboard

layout-dashboard

Grid layout

layout-grid

Compact layout

layout-list

List layout

list

Loading

loader-circle

Email

mail

Menu

menu

Indeterminate

minus

Edit

pencil-line

Add

plus

Refresh

refresh-cw

Compact cards

rows-3

Search

search

Settings

settings

Editor

store

Data table

table-2

Delete

trash-2

Warning

triangle-alert

User

user

Close

x

Forms

UiDateRangePicker

components/ui/UiDateRangePicker.vue

Single-month range calendar with start/end selection, keyboard grid navigation, and apply/cancel/clear actions.

Variants / props

modelValue: { start, end }min, max boundarieslocale, weekStartsOn

States to validate

No selectionStart onlyFull rangeDisabled boundaryToday indicatorReduced motion

Known instances

components/pages/SalesHomePage.vuepages/design-system/components.vue

Mai 2026

Aucune date sélectionnée

Use as a popover anchored to its trigger; the caller owns positioning and open/close.

Data

UiTrendAreaChart

components/ui/UiTrendAreaChart.vue

Compact animated SVG area chart for dashboard trend summaries.

Variants / props

tone: success, primaryfree numeric point series

States to validate

Animated drawFlat seriesEmpty seriesReduced motionLight/dark theme

Known instances

components/patterns/AppRecentSalesWidget.vuepages/design-system/components.vue
Maximum value in this trend: 18.

Use for compact dashboard trends; surrounding patterns must render the actual values as text.

Data

UiDonutChart

components/ui/UiDonutChart.vue

Compact animated SVG donut chart for proportional dashboard summaries.

Variants / props

size: sm, mdtoken-based segment palette

States to validate

Animated drawZero-value dataReduced motionLight/dark theme

Known instances

components/patterns/AppDistributionChannelsWidget.vuepages/design-system/components.vue

Use for compact share-of-total visuals; surrounding patterns must render the legend and values.

Data

UiTableShell

components/ui/UiTableShell.vue

Scrollable wrapper with uniform bg-base background and top border for data tables.

Variants / props

free table slot

States to validate

Horizontal overflowUniform backgroundLight/dark theme

Known instances

components/pages/EditorHomePage.vuepages/admin/index.vuepages/design-system/components.vue
FormatStatus
ONIX catalogueEPUBValid
Distributor exportPDFNeeds review
Missing metadataEPUBError
Data

UiTableHeadCell

components/ui/UiTableHeadCell.vue

Sticky header cell for tables.

Variants / props

free slotUiTableSortButton compatible

States to validate

Sticky topLight/dark theme

Known instances

components/pages/EditorHomePage.vuepages/design-system/components.vue
Fixed column

Use only inside `thead`, with or without `UiTableSortButton`.

Data

UiTableRow

components/ui/UiTableRow.vue

Table body row with centralized hover and row-state styling.

Variants / props

state: default, hover, selected, dangerinteractive

States to validate

DefaultHoverSelectedDangerLight/dark theme

Known instances

components/pages/EditorHomePage.vuepages/design-system/components.vue

Editorial variants

Row emphasis

Show the row states product teams are allowed to force in demos or data workflows.

Standard rowReady
Needs reviewOpen

Default row

Normal row with hover behavior owned by the component.

state=defaultinteractive
Standard rowReady
Needs reviewOpen

Selected row

Low-emphasis row selection for contextual workflows.

state=selected
Standard rowReady
Needs reviewOpen

Danger row

Use sparingly for row-level risk or destructive context.

state=danger
Default rowHover me
Forced hover rowUses bg-elevated
Error rowRequires attention

Row states must stay in `UiTableRow`, not in application pages.

Data

UiTableCell

components/ui/UiTableCell.vue

Table body cell with standard padding, border, and typography.

Variants / props

align: middle, topfree slot

States to validate

Light/dark theme

Known instances

components/pages/EditorHomePage.vuepages/design-system/components.vue
Text value Valid

Cell styling must stay here to keep tables coherent.

Data

UiTableActionCell

components/ui/UiTableActionCell.vue

Sticky row-action cell that reveals actions in a floating pill on hover and focus.

Variants / props

align: middle, topfree action slot

States to validate

Hidden by defaultVisible on row hoverVisible on row focus-withinSticky right edgeLight/dark theme

Known instances

components/pages/EditorHomePage.vuepages/design-system/components.vue
UserStatusActions
Action row Active

Hover or focus the row to reveal the sticky action pill.

Data

UiTableSortButton

components/ui/UiTableSortButton.vue

Sort button for table headers, with a directional icon only when the column is active.

Variants / props

active true/falsedirection: asc, desc

States to validate

Inactive without iconActive asc arrow-upActive desc arrow-downHoverFocus visible

Known instances

components/pages/EditorHomePage.vuepages/admin/index.vuepages/design-system/components.vue

Editorial variants

Sort affordance

Keep the inactive header quiet and show direction only on the active sort column.

Inactive sort

No icon until the column is the active sort key.

active=false

Ascending sort

Use arrow-up when data is sorted from low to high or A to Z.

activedirection=asc

Descending sort

Use arrow-down when data is sorted from high to low or Z to A.

activedirection=desc

The button emits `click`; the page then decides the column and direction.