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 reactcd my-reshaped-app
Or if you're using Typescript:
npm init vite@latest my-reshaped-app --template react-tscd 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:
// npmnpm install ./vendor/reshaped.tgz// yarnyarn 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.