Vite installation

Setting up Reshaped package in a Vite project.

Create your project

Start by creating your Vite project if you don't have one already. Using Create Vite should speed up this process:

npm init vite@latest my-reshaped-app --template react
cd my-reshaped-app

Or if you're using TypeScript:

npm init vite@latest my-reshaped-app --template react-ts
cd my-reshaped-app

Install Reshaped

Install the latest version from NPM. You can track our latest releases in our changelog.

npm install reshaped

Add PostCSS config

Create a postcss.config.js file in the root folder of your project and re-export Reshaped PostCSS config:

export { config as default } from "reshaped/config/postcss.js";

Start the application

Run your project locally process with npm run dev.

npm run dev

Start using Reshaped components

Try using a few components in src/App.tsx:

import { Button, Container, Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

const App = () => {
  return (
    <Reshaped theme="reshaped">
      <Container width="652px">
        <Button href="/">Get started</Button>
      </Container>
    </Reshaped>
  );
};

export default App;

You can find more details in our starter-vite example on Github. If you want to learn more about components - search for the relevant components documentation in the sidebar.