Layout primitivesFlex

Col.

Col is the flex child role. Place it inside a Row or Stack to say how a region shares space: grow into what is left, refuse to shrink, or align itself differently from its siblings. It ships with min-w-0 so long content never breaks a Row.

TypeScriptRenders div.min-w-0Accepts native props

When to reach for it

Usage

Col is a thin wrapper over Tailwind utilities, so it costs nothing at runtime and composes with every other primitive.

  • Side-by-side regions inside a Row where one side must fill the remaining width.
  • Media objects: a fixed thumbnail next to flexible, truncating text.
  • A single child that needs a different cross-axis alignment than the rest of its Row.
Import
import { Col } from "@/components/ui/col";
import { Row } from "@/components/ui/row";

In practice

Examples

Each example is a real composition with shadcn components. Switch to the Code tab for the source, or copy it directly.

Fixed rail, flexible content

The navigation rail opts out of shrinking and sets its own width. The content Col grows into the rest; a Stack inside each Col spaces its children.

GeneralNotificationsMembersBillingIntegrations

Notifications

Choose how you want to hear about activity in your projects. Mentions and review requests are always delivered.

Media object with truncation

Col sets min-w-0, which is what lets a long filename truncate instead of pushing the download button out of the row.

brand-guidelines-final-approved-v12-really-final.pdf4.2 MB · Today
component-inventory.xlsx812 KB · Yesterday

Per-child alignment

The Row aligns its children to the top so multi-line text reads well. self="center" lets the action button opt back into centering.

Tokens: align spacing scale with Tailwind 4Replaces the legacy 5px steps with the default scale and migrates the three components that still used them.
Page: mirrored asideFixes the start position.

Reference

Props

Every primitive also accepts the native props of its element, including className, children, ref, and data attributes.

PropTypeDefault
grow

Fill the remaining space in the parent flex container.

booleanfalse
shrink

Allow the region to shrink below its content width. Pass false for fixed rails.

booleantrue
self

Override the parent's align for this child only (self-* utilities).

"auto" | "start" | "center" | "end" | "stretch" | "baseline""auto"

Good to know

Notes

  • Col is not a container. To space its children, nest a Stack or Row inside it.
  • A Col with shrink={false} keeps its intrinsic width. Give it an explicit width class when the content is flexible.