Documentation
Changelog
Themes
Blog
Pricing
Sign in
/
Getting Started
Overview
Our principles
Source code
React setup
Installation
Core concepts
Figma setup
Installation
Core concepts
Integrations
Next.js
Remix
Tailwind CSS
Vite
Webpack
Create React App
Guidelines
TypeScript
Framer Motion
React Hook Form
Recharts
TanStack Table
Browser support
Release strategy
Design Tokens
Overview
Color
Typography
Unit
Radius
Shadow
Viewport
Theming
Creating themes
Scoped theming
Runtime theming
Generating themes
Theming in Figma
Tokens Studio integration
Components
Action bar
Alert
Autocomplete
Avatar
Badge
Breadcrumbs
Button
Calendar
Card
Carousel
Checkbox
Divider
Dropdown menu
File upload
Hotkey
Link
Loader
Menu item
Modal
Pagination
Pin field
Popover
Progress
Radio
Scrim
Select
Skeleton
Slider
Stepper
Switch
Table
Tabs
Text area
Text field
Timeline
Toast
Tooltip
Utilities
Reshaped provider
Accordion
Actionable
Container
Dismissible
Form control
Grid
Hidden
Hidden visually
Icon
Image
Overlay
Resizable
Scroll area
Text
Theme
View
Hooks
useFormControl
useHotkeys
useResponsiveClientValue
useRTL
useScrollLock
useTheme
useToggle
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
React setup
Getting started guide
React demo
How to build with Reshaped
Figma
Figma setup
Getting started guide
Figma demo
How to build with Reshaped
Community
Community repository
Bug reports and requests
Public roadmap
What's coming next
Components
$10.99
Add
Action bar
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
RS
Avatar
Thumbnail of a user photo, organization, or a visual representation of other types of content
New
23
Badge
Compact element that represents the status of an object or user input
Cancel
Save
Button
Interactive element used for single-step actions
Catalog
Ultraboost
Breadcrumbs
Top-level product navigation that helps user understand the location of the current page and navigate back to its parents
December 2024
Select a month
Mo
Tu
We
Th
Fr
Sa
Su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
Work
1,765
Vacation
2,235
Divider
Element for visual content separation
Actions
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
FR
Dutch
NL
Menu item
Interactive element to show choices or actions in the menu
Reset your device to its default factory settings?
Reset
Cancel
Modal
Container appearing in front of the main content to provide critical information or an actionable piece of content
1
2
3
4
5
...
10
Pagination
Pagination lets users navigate across a range of pages
2
5
4
3
Pin field
Form field to enter and edit one-time passwords and other codes
Show location
Popover
Container displaying rich content on top of other content triggered by an interactive element
Loading...
Progress
Bar displaying progress for a task that takes a long time or consists of several steps
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
Sort by
Following
Select
Dropdown form field used for selecting one option from a list
Skeleton
Animated placeholder replacing page elements while their data is loading
20
70
Slider
Form field to select a single numeric value or a range of values
Step 1
Subtitle
2
Step 2
Stepper
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
List view
Map view
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
Tooltip
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
Accordion
Utility to toggle visibily of content regions
Save progress
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
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
Share
Share
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
Hooks
useFormControl
Custom hook to inherit values from the FormControl utility in your custom-built form fields
useHotkeys
Custom hook to subscribe to keyboard hotkeys
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