Composition format

Composition format is an open standard for component examples based on JavaScript ES6 modules. It is used to simulate components in different variations for testing, visualization and discoverability purposes.

Compositions are functions that return a component, in a specific state and/or a specific context. They are exported using a name and never as default.

export const DarkCard = () => <Card theme="dark">Hello dark world!</Card>;
Copied

export const CardInHero = () => {
  return (
    <Hero>
      <Card>A "card" component, used in a "hero" component</Card>
    </Hero>
  );
};
Copied

Compositions are compatible with the Storybook`s Story format.