DocumentationExamplesChangelog
/
Getting Started
Overview
Our principles
Release strategy
Browser support
Design Tokens
Overview
Color
Typography
Unit
Radius
Shadow
Viewport
Components
Alert
Autocomplete
Avatar
Badge
Breadcrumbs
Button
Calendar
Card
Carousel
Checkbox
Context menu
Divider
Dropdown menu
File upload
Link
Loader
Menu item
Modal
Number field
Pagination
Pin field
Popover
Progress bar
Progress indicator
Radio
Select
Skeleton
Slider
Switch
Table
Tabs
Text area
Text field
Toast
Toggle button
Toggle button group
Tooltip
Utility components
Reshaped provider
Accordion
Actionable
Container
Dismissible
Flyout
Form control
Grid
Hidden
Hidden input
Hidden visually
Icon
Image
Overlay
Resizable
Scroll area
Text
Theme
View
Utility functions
classNames
responsivePropDependency
TrapFocus
Hooks
useFormControl
useHandlerRef
useHotkeys
useKeyboardArrowNavigation
useKeyboardMode
useOnClickOutside
useResponsiveClientValue
useRTL
useScrollLock
useTheme
useToggle

Overview

Reshaped is a professionally crafted design system, providing core components you would need in every project. We focus on accessibility, component composition and developer experience with a custom headless layer.
React setup
Getting started guide
Figma setup
Getting started guide
Repository
Source code and feature requests
Components
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
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
Artwork preview
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
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
Work
1,765
Vacation
2,235
Divider
Element for visual content separation
Dropdown menu
List of contextual actions that users can trigger
FileUpload
Form field used for handling file attachments including the drag-and-drop interaction
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?
ResetCancel
Modal
Container appearing in front of the main content to provide critical information or an actionable piece of content
Number field
Form field to enter and edit numeric values
...
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
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
Progress indicator
Progress indicator displays the current step in a multi-step process.
Radio
Form field used for selecting one option from a list
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
Switch
Toggle for immediately changing the state of a single item
ProductPrice
Coffee$4
Sandwich$6.50
Table
Container for organizing and displaying data in a tabular format
Tabs
Navigation between multiple pages or content sections
Text area
Form field to enter and edit multiline text
Text field
Form field to enter and edit single-line text
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 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
Hidden input
Utility for implementing custom radio and checkbox selection
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
Canyon rock
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
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
useKeyboardArrowNavigation
Custom hook to enable arrow navigation within a selected DOM node
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
OverviewDesign tokensTheming playground
Resources
ChangelogRoadmapBlogChecklist
Built with Reshaped in Amsterdam ❤️
Contact us·
© Reshaped 2026