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.js
file in the project root. - Configure Fractal using the official documentation.
- Start the Fractal project by running either
npx fractal start
or creating an alias in yourpackage.json
under the scripts section.
Installing globally
- Ensure you have a supported LTS version of Node.
- Run the following command:
npm install -g fractal
This 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.