# ColsStack

> `ColsStack` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

Source: https://ui.jcsoftdev.com/docs/components/cols-stack

`ColsStack` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

## Import

```ts
import { ColsStack } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/cols`.

## Usage

```tsx
<ColsStack>
  <>
          <Panel title="Agenda de hoy">12 citas, 3 por confirmar.</Panel>
          <Panel title="Barberos">Diego, Mateo y Camila en turno.</Panel>
        </>
</ColsStack>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `wideSplit` | `boolean` |  | From 1500px of page width the stack becomes 2 columns and its first child spans both rows. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-cols--default)
- [Rail](/storybook/?path=/story/containers-cols--rail)
- [Half](/storybook/?path=/story/containers-cols--half)
- [Calc](/storybook/?path=/story/containers-cols--calc)
- [With Stack](/storybook/?path=/story/containers-cols--with-stack)
- [Narrow](/storybook/?path=/story/containers-cols--narrow)

## Source

`packages/ui/src/containers/cols/cols.tsx`