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.