All Components

Components are the building blocks of oneSlash interfaces. They are grouped by purpose: actions, selection, text input, navigation, feedback, containers and display.

Actions

ButtonDisplays a button or a component that looks like a button.Icon ButtonA button with only an icon, for toolbars, action menus and compact interfaces.LinkNavigates to other pages or resources, in several colors and sizes.

Selection

CheckboxLets the user select one or more items from a set.Radio GroupLets the user select one option from a set.SelectA dropdown for selecting one or multiple options from a list.TagA compact element that represents an input, attribute or action.

Text Input

Text FieldA single-line input for short text such as names, emails and search queries.TextareaA multi-line input that grows with its content.

NavigationWraps menu items in a semantic nav element for vertical layouts.TabSwitches between different views.Tab ContainerGroups tabs into a tab list with a sliding selection pill.MenuA container for a list of menu items in a dropdown or popover.Menu ItemA single item in a menu, with optional icon and selected state.

Feedback

AlertShows a short, important message without interrupting the task.Loading ScreenShown while the app loads content to render.TooltipShows informative text on hover, focus or tap.PopoverA floating layer that shows content next to a target element.Empty BoxA placeholder shown when there is no content.

Containers

ModalA dialog shown in a layer above the app.LineA horizontal or vertical divider.Table ContainerThe wrapper of the table component system.Table HeaderThe header section of a table.Table Header CellA single cell in a table header.Table RowA row of data cells in a table.Table CellA single data cell in a table row.

Display

IconLucide icons with consistent sizing and color.Time StampShows absolute or relative time.User ImageShows a user's avatar or a fallback based on their handle.