Vite installation

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 the latest version from NPM. You can track our latest releases in our changelog.

npm install reshaped

Import PostCSS config from Reshaped and add it to postcss.config.js file in the root folder:

const { config } = require("reshaped/config/postcss");
module.exports = config;

Run your build process with npm run dev.

npm run dev

Import some of the core components in src/App.tsx and try them out:

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

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

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.