# Stack (/components/layout/stack)
`Stack` places direct children on the logical block axis. Read
[Layout](/docs/layout#choose-a-layout-component) to choose a layout component.
apps/docs/src/examples/stack/basic.tsx
```tsx
import { Stack } from '@luke-ui/react/stack';
import { ExampleItem } from '#docs';
export default () => {
return (
First block item
Second block item
Third block item
);
};
```
## Alignment [#alignment]
`alignItems` defaults to `stretch`.
apps/docs/src/examples/stack/alignment.tsx
```tsx
import { Stack } from '@luke-ui/react/stack';
import { ExampleItem } from '#docs';
export default () => {
return (
Short item
A wider item
The widest item
);
};
```
## Choose the rendered element [#choose-the-rendered-element]
Stack uses
[Box's `elementType` and `render` contract](/components/layout/box#choose-the-rendered-element).
apps/docs/src/examples/stack/semantic-element.tsx
```tsx
import { Stack } from '@luke-ui/react/stack';
import { ExampleItem } from '#docs';
export default () => {
return (
First list item
Second list item
Third list item
);
};
```
## API [#api]