38 pages · Svelte 5 and React 19

Components

One API in both frameworks, one stylesheet, one set of tokens. Every component works with the keyboard, names itself for screen readers, stops moving when the reader asks for less motion, and speaks English and Russian.

Actions

Button Starts an action. Four variants, three sizes, icons and a busy state. IconButton A square button with only an icon, named for screen readers.

Forms

Input A labelled one-line text field with hint, error, icon, prefix and suffix. Textarea A labelled multi-line text field with an optional character counter. Select One choice from a short list, with typeahead. Combobox A searchable single choice for long lists. Checkbox An independent yes / no choice. Switch An on / off setting that applies at once. RadioGroup One choice from a few options, all visible. Slider A value in a range, shown as it moves. DatePicker A date field with a keyboard-driven calendar.

Navigation

Tabs Switches between views of one subject, as a line or a segmented control. Breadcrumbs Where the page sits, as a trail of links. Pagination Pages of a long list, with gaps for long ranges. SidebarNav The side navigation of an office. TopBar The top bar of a site or an office.

Data

Table Rows of data: sort, paging, a sticky header, empty and loading states. StatTile One key number with its change and trend. Charts Line, bar and donut charts that stay readable without the picture. KeyValue Labelled values in a grid or in ruled rows. Formatters Money, RTP and dates, exact and in the reader’s language. CountryFlag A country as its code chip, named in the reader’s language. CopyId A long id, shortened, with a copy button.

Display

Card A surface for one thing: an image, a title, a body and a footer. Badge A short status label, with a live dot when it changes. Tag A filter or a chosen value, optionally removable. Avatar A person or a company: a picture, else initials. ThemeSwitch Light, dark or the system’s theme.

Feedback

Toast Short notifications from a queue, polite or urgent. Progress How far a job has got, or that it is running. Spinner A small loading indicator. Skeleton A placeholder while content loads. EmptyState What a page or a table shows when there is nothing yet. ErrorState What a page or a panel shows when loading failed.

Overlays

Tooltip A short hint on hover and on keyboard focus. Popover A small panel next to its trigger. Modal A dialog that needs an answer before going on. Drawer A modal panel from the side or the bottom.