Reshaped is a professionally crafted design system for product design and development teams and individuals. We provide core components you would need in every project, focusing on accessibility, component composition and development experience.

React

React setup

Getting started guide

Figma

Figma setup

Getting started guide

Figma library

Components and design tokens

Community

Repository

Source code and feature requests

Components

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

Confirmation sent

Alert

Prominent message related to the whole page or its specific area

Autocomplete

Form field that suggesst values based on the user input

Avatar

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

New

Badge

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

CancelSave

Button

Interactive element used for single-step actions

Breadcrumbs

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

Calendar

Date and month picker with an individual and range selection

0.74 ETH

Make a bid

Card

Container to group information about subjects and their related actions

Carousel

Horizontal scrollable areas used for displaying grouped content

Keep me signed in

Receive updates

Checkbox

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

Context menu

List of contextual actions located at the event pointer coordinates

Element for visual content separation

Dropdown menu

List of contextual actions that users can trigger

Drag an audio file to upload

FileUpload

Form field used for handling file attachments including the drag-and-drop interaction

⌘K

Hotkey

Element displaying which key or combination of keys are used for a shortcut

Proceed to checkout

Link

Interactive text element used for navigation within the text paragraphs

Loader

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

French

Dutch

Menu item

Interactive element to show choices or actions in the menu

Reset your device to its default factory settings?

ResetCancel

Modal

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

Amount

Number field

Form field to enter and edit numeric values

...

Pagination

Pagination lets users navigate across a range of pages

Pin field

Form field to enter and edit one-time passwords and other codes

Popover

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

Progress

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

Progress indicator

Progress indicator displays the current step in a multi-step process.

Pizza

Ice cream

Radio

Form field used for selecting one option from a list

Office spaces

Scrim

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

Select

Dropdown form field used for selecting one option from a list

Skeleton

Animated placeholder replacing page elements while their data is loading

Slider

Form field to select a single numeric value or a range of values

Stepper is used to indicate the user's progress throughout a multi-step process

Wi-Fi

Switch

Toggle for immediately changing the state of a single item

Product	Price
Coffee	$4
Sandwich	$6.50

Table

Container for organizing and displaying data in a tabular format

Tabs

Navigation between multiple pages or content sections

Your review

Text area

Form field to enter and edit multiline text

Your email

Text field

Form field to enter and edit single-line text

Timeline

List of elements displayed in chronological order

Event completed

Toast

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

ToggleButton

Button component that can be turned on or off

ToggleButtonGroup

Group of button components with managed state

Tooltip

Contextual text information display on element hover or focus

Utility components

Reshaped provider

Global context provider that provides all of our and your components with a shared context

Accordion

Utility to toggle visibily of content regions

Actionable

Low-level utility for creating interactive elements

Container

Responsive layout utility to control width of the main content area

Content

Dismissible

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

Show content

Flyout

Headless utility for building custom popover-like components

Field label

Field helper

Form control

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

Grid

Low-level utility for creating interactive elements

Hidden for small viewport

Hidden for medium+ viewports

Hidden

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

Icon

Wrapper for SVG assets to control their appearance

Image

Utility for displaying images and controlling their behavior

Content

Overlay

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

Resizable

Low-level layout utility for managing resizable content areas

Design System

Text

Utility to apply typography styles responsively based on the viewport size

Theme

Utility to apply themes and color modes to specific page areas

View

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

Utility functions

classNames

Utility for combining multiple class names into a single string

responsivePropDependency

Utility resolving values based on responsive properties syntax

TrapFocus

Utility for managing the keyboard focus navigation in custom modals and menus

Hooks

useFormControl

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

useHandlerRef

Custom hook to memoize event handlers passed to a component

useHotkeys

Custom hook to subscribe to keyboard hotkeys

useKeyboardMode

Custom hook to manage the display of the focus rings across the application

useOnClickOutside

Custom hook to manage click events triggered outside the provided elements

useResponsiveClientValue

Custom hook to resolve a value based on the current viewport size of the browser

useRTL

Custom hook to control the direction of the content flow

useScrollLock

Custom hook to lock and unlock page scrolling

useTheme

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

useToggle

Custom hook for toggling states on and off

Professionally crafted React & Figma components for building beautiful products or starting your own design system

Documentation

Overview Design tokens Theming playground

Resources

Changelog Roadmap Blog Checklist

Built with Reshaped in Amsterdam ❤️