We’re not aiming for a large number of components or one-off variations. Instead, we focus on the quality of core components familiar to you and widely used across the web. Our goal is to make your experience simple and efficient. We handle implementation details like accessibility, flexible architecture, and theming, so you can start building your product immediately.

Composition and theming

We don’t assume how your product should work or look. Instead, we create highly composable atomic UI pieces that you can easily assemble based on your product needs. Additionally, we automatically handle all layout edge cases, making it effortless to combine components together.


<View width="300px">
  <Card padding={0}>
    <MenuItem
      startSlot={<Avatar src="/img/landing/author.webp" size={8} />}
      endSlot={
        <Badge size="small" color="critical" rounded>
          27
        </Badge>
      }
    >
      Open profile
    </MenuItem>
    <Divider />
    <MenuItem>Manage account</MenuItem>
    <MenuItem>Add another account</MenuItem>
    <MenuItem>Sign out</MenuItem>
    <Divider />
    <View padding={2} align="center" direction="row" gap={3}>
      <Button size="small" variant="ghost">
        Privacy Policy
      </Button>
      <Button size="small" variant="ghost">
        Terms of Service
      </Button>
    </View>
  </Card>
</View>

Reshaped offers a flexible and easy-to-use theming approach. We provide semantic design tokens, like colors and typography values, that you can customize to match your brand. You can create new themes with full control over every value or use our color generator for faster results. With semantic design tokens, your themes will be accessible and include automatic dark mode support.


<View gap={3} direction="row">
  <Button color="primary">Reshaped</Button>

  <Theme name="twitter">
    <Button color="primary" rounded>
      Twitter
    </Button>
  </Theme>
</View>

Long-term maintenance

We prioritize long-term benefits over short-term gains, ensuring our product’s longevity.

Our components serve as a foundation for your design system, with a transparent release strategy, guidelines, and scripts for easy migrations. At the same time, we believe in browser-native technologies, minimizing runtime dependencies to avoid unnecessary libraries.

Runtime peer dependencies: React, ReactDOM
Build-time dependencies: PostCSS, CSS Modules, TypeScript (optional)

Check our changelog to see our release history.

Balanced approach

We believe the future of design systems lies between headless and styled component libraries. Headless libraries offer complete customization but leave layout and styling challenges to you. Styled component libraries often have opinions that may not fit your product.

We strike a balance with versatile headless components and highly flexible styled components. We don’t make product decisions for you; we empower you to make them faster.

Overview

Source code