Overview
Fractal is a tool that helps users build and document website component libraries and design systems. It allows for modular website design by breaking up the UI into small, reusable chunks that can be assembled in various ways. Fractal can be used to preview and document component libraries, or to scale up and document entire design systems for organizations.
Features
- Assembles and previews website component libraries
- Allows for modular website design
- Helps document component libraries and design systems
Installation
To install Fractal into your project, follow these steps:
Install into your project (recommended)
- Ensure you have a supported LTS version of Node.
- Run the following command in your project root:
npm install fractal - Create a
fractal.config.jsfile in the project root. - Configure Fractal using the official documentation.
- Start the Fractal project by running either
npx fractal startor creating an alias in yourpackage.jsonunder the scripts section.
Installing globally
- Ensure you have a supported LTS version of Node.
- Run the following command:
npm install -g fractalThis will give you global access to the Fractal command. Note: This option is not recommended if you need to use different Fractal versions on different projects.
Summary
Fractal is a powerful tool for building and documenting website component libraries and design systems. It allows for modular website design and provides the ability to preview and document components in an organized manner. With its installation options and extensive documentation, Fractal is a valuable asset for web designers and developers.