Reshaped
Reshaped provides professionally crafted component libraries in React and Figma to make your product design and development faster.
Next.js installation - Reshaped
This approach will create a Next.js project using TypeScript and the Next App directory with React server components support. It won't set up Tailwind by default, but you can enable it if you plan to use Reshaped Tailwind integration.
Design system built for your scale with React and Figma - Reshaped
Reshaped is a professionally crafted design system for product design and development teams and individuals. We provide core components you would need in every project, focusing on accessibility, component composition and development experience.
Installation - Reshaped
Reshaped relies on CSS Modules and PostCSS to keep styles isolated and support missing browser features. We keep CSS imports in our JS files to ensure CSS tree-shaking works as expected. This way, you'll get CSS only for the components you're using instead of importing CSS for the entire library.
View - Reshaped
View is the most common layout utility in Reshaped as it provides common functionality required for building layouts. It can be used to apply styles based on the design tokens provided by Reshaped and handles many layout edge cases that you would have to solve yourself when using flexbox directly.
Dropdown menu - Reshaped
DropdownMenu supports most of the properties Popover does, allowing you to use its event handlers or position it differently. It will automatically try to fit into the viewport, using the position you pass as a default. You can control which positions should be used as fallbacks with the fallbackPositions array.
Webpack installation - Reshaped
Create your project. Start by creating a new project using NPM with Webpack and other related dependencies. We're installing dependencies for a simple project using TypeScript with ts-loader in the following example. Dependencies may vary based on the project setup.
Vite installation - Reshaped
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:
Design system built for your scale with React and Figma - Reshaped
2024年4月14日 · Reshaped provides professionally crafted component libraries in React and Figma to make your product design and development faster.
Icon - Reshaped
To support tree-shaking and allow you to use any icon set, Icon has an svg property to pass a React component to it. You can use it with any icon set available on the web if it returns icons as React components or if your bundle transforms SVG imports into React nodes. <Icon svg={IconZap} size={5} />.