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

Download the latest Reshaped release from the Releases page and save the .tgz file into your project. Then install the package using the file path. For example, if you save the package as ./vendor/reshaped.tgz in the project root folder, you can run:

// npm
npm install ./vendor/reshaped.tgz

// yarn
yarn add ./vendor/reshaped.tgz

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

const postcss = require("reshaped/postcss");
module.exports = postcss.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 vite-starter example on Github. If you want to learn more about components - search for the relevant components documentation in the sidebar.