/

Getting Started

Design Tokens

Components

Utilities

Hidden visually

Hooks

Overview

UICapsule is a museum of components from real-world design systems.

It is a reference implementation for anyone building their own component library - showcasing common functionality, best practices, accessibility requirements, and alternative examples.

Components

Utility to toggle visibily of content regions

Confirmation sent

Prominent message related to the whole page or its specific area

Thumbnail of a user photo, organization, or a visual representation of other types of content

Compact element that represents the status of an object or user input

Interactive element used for single-step actions

Top-level product navigation that helps user understand the location of the current page and navigate back to its parents

Artwork preview

Container to group information about subjects and their related actions

Horizontal scrollable areas used for displaying grouped content

Keep me signed in

Receive updates

Form field used to select one or multiple values from the list

Element for visual content separation

List of contextual actions that users can trigger

Proceed to checkout

Interactive text element used for navigation within the text paragraphs

Animated element that communicates progress without telling how long the process will take

Interactive element to show choices or actions in the menu

Reset your device to its default factory settings?

Container appearing in front of the main content to provide critical information or an actionable piece of content

Dark semi-transparent layer to direct user attention to its content

Container displaying rich content on top of other content triggered by an interactive element

Bar displaying progress for a task that takes a long time or consists of several steps

Form field used for selecting one option from a list

Dropdown form field used for selecting one option from a list

Toggle for immediately changing the state of a single item

Navigation between multiple pages or content sections

Form field to enter and edit multiline text

Form field to enter and edit single-line text

Event completed

Notification message or a piece of information displayed above the page content

Contextual text information display on element hover or focus

Utilities

Contextual information and actions related to a specific area on the page

Low-level utility for creating interactive elements

Utility for defining an element's size proportions

Faded-out layer used to emphasize a specific element on the page

Responsive layout utility to control width of the main content area

Utility for displaying different types of content that can be removed from the screen

Utility to easily re-use form field styles and accessibility features

Hidden for small viewport

Hidden for medium+ viewports

Utility that lets you hide content responsively with server-side rendering support

This content is only available to screen readers

Hidden visually

Utility that provides the content to assistive technologies while hiding it from the screen

Wrapper for SVG assets to control their appearance

Canyon rock

Utility for displaying images and controlling their behavior

Utility to apply typography styles responsively based on the viewport size

Utility to apply themes and color modes to specific page areas

Low-level utility for working with flexbox API and applying design tokens

Hooks

Custom hook to generate ids for DOM elements

Custom hook to inherit values from the FormControl utility in your custom-built form fields

Custom hook to control the direction of the content flow

Custom hook to lock and unlock page scrolling

Custom hook to switch between the light and dark mode of the used theme

Custom hook for toggling states on and off