Documentation Changelog Pricing

Sign in Get pro license

/

Design Tokens

Utilities

Reshaped provider

Hidden visually

Hooks

useResponsiveClientValue

Overview

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

Getting started guide

Figma

Getting started guide

How to build with Reshaped

Community

Community repository

Bug reports and requests

What's coming next

Components

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

Confirmation sent

Prominent message related to the whole page or its specific area

Form field that suggesst values based on the user input

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

Date and month picker with an individual and range selection

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

List of contextual actions located at the event pointer coordinates

Element for visual content separation

List of contextual actions that users can trigger

Drag an audio file to upload

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

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

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

Pagination lets users navigate across a range of pages

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

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

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

Dropdown form field used for selecting one option from a list

Animated placeholder replacing page elements while their data is loading

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

Toggle for immediately changing the state of a single item

Product	Price
Coffee	$4
Sandwich	$6.50

Container for organizing and displaying data in a tabular format

Navigation between multiple pages or content sections

Form field to enter and edit multiline text

Form field to enter and edit single-line text

List of elements displayed in chronological order

Event completed

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

Contextual text information display on element hover or focus

Utilities

Reshaped provider

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

Utility to toggle visibily of content regions

Low-level utility for creating interactive elements

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

Low-level utility for creating interactive elements

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

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

Low-level layout utility for managing resizable content areas

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 inherit values from the FormControl utility in your custom-built form fields

Custom hook to subscribe to keyboard hotkeys

useResponsiveClientValue

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

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