Skiff UI – Design System

Skiff UI is an open-source React component library based on a collection of reusable interface elements used in Skiff. It offers a wide range of customizable components for web apps, empowering you to create beautiful and user-friendly interfaces.

Quickstart Explore components

Components

Avatar

A graphical representation of a user or entity, often an image or initials displayed in a circular container.

Banner

Displays prominent messages, actions, and reminders at the top of the screen.

Button

A clickable element that triggers actions, such as form submission or navigation.

Button Group

Group related buttons together for logical interaction, such as selecting options or triggering actions within a specific context.

Color

Design system color palette and token names.

Chip

A compact component displaying small information or attributes, commonly used for tags, categories, or short descriptions.

Circular Progress

A progress indicator that can be used to represent the progress or loading state of a task.

Divider

A horizontal or vertical separator for grouping and organizing content.

Dropdown

Presents a menu-like list of options when activated, providing a compact way for users to choose or perform actions.

Facepile

Displays a collection of user avatars in a compact format, commonly used to represent participants or contributors.

IconButton

A clickable element that triggers actions, such as form submission or navigation. Similar to Button except it renders only an Icon inside a square component.

IconText

A component for displaying Icons combined with Typography text inline.

InputField

Allows users to enter or edit text or data, providing an interface for capturing user input in various forms.

Select

The Select component displays a selected value and controls a Dropdown when clicked.

Toggle

Component that allows users to switch between two different states, typically representing an on/off or true/false choice.