tools/storybook/stories/docs/introduction.mdx
The WooCommerce project uses Storybook to view and work with the UI components developed in WooCommerce packages.
On this interactive site you can browse individual components, their controls, options, and settings in isolation. You can also modify controls and arguments and see the changes right away.
The components displayed on this site can be used in your code to extend WooCommerce. Import them from the components root directory like in below example:
import { Rating } from '@woocommerce/components';
export default function MyProductRating() {
return <Rating rating={ 4.5 } size={ 18 } totalStars={ 5 } />;
}
The site shows the individual components in the sidebar and the Canvas on the right. Select the component you’d like to explore, and you’ll see the display on the Canvas tab. If the component also has controls/arguments, you can modify them on the Controls tab on the lower half of the screen.
To view the documentation for each component use the Docs menu item in the top toolbar.
To use it in your local development environment run the following command in the top level WooCommerce directory:
pnpm --filter=@woocommerce/storybook watch:build