Skip to main content

​
Quick Start

This guide will help you build your first Reshaped component in just a few minutes.

​
Prerequisites

Make sure you’ve installed Reshaped and imported the required styles.

​
Step 1: Set Up the Provider

Wrap your application with the Reshaped provider component. This provides theming, color modes, and other configuration to all child components.
1

Import the Provider

Import the Reshaped component from the package:
import { Reshaped } from 'reshaped';
import 'reshaped/bundle.css';
import 'reshaped/themes/reshaped/theme.css';
2

Wrap Your App

Wrap your application root with the Reshaped provider:
App.tsx
import { Reshaped } from 'reshaped';
import 'reshaped/bundle.css';
import 'reshaped/themes/reshaped/theme.css';

function App() {
  return (
    <Reshaped theme="reshaped">
      <YourApp />
    </Reshaped>
  );
}

export default App;
The theme prop defaults to "reshaped". You can change it to "slate", "figma", or provide a custom theme name.
3

Configure Options (Optional)

Customize the provider with additional options:
<Reshaped
  theme="reshaped"
  defaultColorMode="light"
  colorMode="dark" // Control color mode externally
  defaultViewport="m" // Set default breakpoint
>
  <YourApp />
</Reshaped>

​
Step 2: Use Your First Component

Now you can use any Reshaped component inside the provider.
1

Import Components

Import the components you need:
import { Button, View, Text } from 'reshaped';
2

Build Your UI

Create a simple component using Reshaped:
HelloWorld.tsx
import { Button, View, Text } from 'reshaped';

export default function HelloWorld() {
  return (
    <View gap={4} padding={6}>
      <Text variant="title-3" weight="bold">
        Welcome to Reshaped
      </Text>
      <Text variant="body-1" color="neutral-faded">
        Build beautiful interfaces with professionally crafted components
      </Text>
      <Button color="primary" onClick={() => alert('Hello!')}>
        Get Started
      </Button>
    </View>
  );
}
3

Run Your App

Start your development server:
npm run dev

​
Complete Example

Here’s a complete example combining all the steps:
main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Reshaped, Button, View, Text, Card } from 'reshaped';
import 'reshaped/bundle.css';
import 'reshaped/themes/reshaped/theme.css';

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <Reshaped theme="reshaped" defaultColorMode="light">
      <View padding={6} gap={4} align="center" justify="center" height="100vh">
        <Card padding={6}>
          <View gap={4} align="center">
            <Text variant="title-2" weight="bold">
              Welcome to Reshaped
            </Text>
            <Text variant="body-1" color="neutral-faded" align="center">
              Click the button to increment the counter
            </Text>
            <View direction="row" gap={3} align="center">
              <Button
                variant="solid"
                color="primary"
                onClick={() => setCount(count + 1)}
              >
                Count: {count}
              </Button>
              <Button
                variant="outline"
                color="neutral"
                onClick={() => setCount(0)}
              >
                Reset
              </Button>
            </View>
          </View>
        </Card>
      </View>
    </Reshaped>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

​
Common Patterns

​
Building Layouts with View

The View component is Reshaped’s layout primitive, similar to a flex container: 
<View direction="row" gap={4} padding={6}>
  <View.Item grow>
    <Text>Main content</Text>
  </View.Item>
  <View.Item>
    <Text>Sidebar</Text>
  </View.Item>
</View>

​
Form Controls

Reshaped provides comprehensive form components: 
import { TextField, Checkbox, FormControl } from 'reshaped';

<FormControl>
  <FormControl.Label>Email address</FormControl.Label>
  <TextField
    name="email"
    type="email"
    placeholder="[email protected]"
  />
</FormControl>

​
Responsive Design

Many props accept responsive values for different breakpoints: 
<View
  padding={{ s: 4, m: 6, l: 8 }}
  direction={{ s: 'column', m: 'row' }}
  gap={{ s: 2, m: 4 }}
>
  {/* Content adapts to screen size */}
</View>
Reshaped uses breakpoints: s (small), m (medium), l (large), xl (extra large)

​
What’s Next?

Component Library

Explore all 60+ components with live examples

Theming

Learn how to customize themes and create your own

Hooks

Discover utility hooks for common patterns

Examples

View real-world example projects

​
Need Help?

Join the Reshaped community for support, questions, and discussions. Check out the GitHub repository for issues, examples, and contribution opportunities.

Build docs developers (and LLMs) love

Get started for freeTalk to us