# Component Composition — Storybook

Source: https://www.geekswithgeeks.com/en/storybook/sb-component-composition

> Learn how to compose components and test complex component hierarchies in Storybook.

## Composing components in stories

You can compose multiple components together in a story to test how they interact. This is especially useful for testing parent-child relationships and data flow.

## Composing a list component

Here's how to test a List component with Item children.

```tsx
import { List, ListItem } from './List';

export default {
  component: List,
  title: 'Components/List',
};

export const WithItems = () => (
  <List>
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </List>
);

export const Empty = () => <List />;
export const Loading = () => <List loading />;
```

## Testing data flow

Stories allow you to test how components handle different data, callbacks, and state changes without running the full application.

## Avoid over-composition

Keep composed stories simple and focused. If a story becomes too complex, break it into smaller components.