Skip to main content
Reshaped

​
Welcome to Reshaped

Reshaped is a library with professionally crafted React & Figma components for building beautiful products or starting your own design system.

​
Key Features

60+ Components

From basic buttons and forms to complex components like carousels, calendars, and data tables

Figma Library

Complete Figma library synced with React components for seamless design-to-code workflow

Flexible Theming

Built-in themes (Reshaped, Slate, Figma) with support for custom theme creation

Accessibility First

WCAG compliant with keyboard navigation, screen reader support, and focus management

TypeScript

Fully typed with excellent IDE autocomplete and type safety

Responsive Design

Responsive props and utilities for building adaptive interfaces

​
Component Library

Reshaped provides a comprehensive set of components:
  • Form Controls: Button, TextField, TextArea, Select, Checkbox, Radio, Switch, Slider, and more
  • Data Display: Table, Card, Badge, Avatar, Skeleton, Progress, Timeline
  • Navigation: Tabs, Breadcrumb, Pagination, ActionBar, DropdownMenu, ContextMenu
  • Feedback: Alert, Toast, Modal, Tooltip, Popover, Loader
  • Layout: View, Grid, Container, Divider, ScrollArea, Resizable
  • Typography: Text component with multiple variants and styles

​
Package Ecosystem

Reshaped is organized into three main packages:
  • reshaped - Full React design system with styled components, hooks, and design tokens
  • @reshaped/headless - Headless React components for building custom designs
  • @reshaped/utilities - Framework-agnostic UI utilities in vanilla TypeScript

​
Get Started

Installation

Install Reshaped with npm, yarn, or pnpm

Quick Start

Build your first component in minutes

Components

Browse the complete component library

GitHub

View source code and contribute

​
Why Reshaped?

Reshaped is perfect for teams that want to move fast without sacrificing design quality. Every component is carefully crafted with attention to detail, accessibility, and developer experience.
  • Production Ready: Used by companies building real products
  • Actively Maintained: Regular updates with bug fixes and new features
  • Great DX: Intuitive API, excellent TypeScript support, and comprehensive documentation
  • Figma Integration: Design and develop in parallel with synced component libraries

​
License

Reshaped is open source and licensed under the MIT License.

Build docs developers (and LLMs) love

Get started for freeTalk to us