Columns

Usage

• Use Columns to place related content side by side (comparisons, text next to an image).
• Keep to 2–3 columns for text; more columns get narrow quickly.
• Columns do not stack on narrow screens; avoid them for content that must read well on phones.
• Don’t use Columns for page layout or app chrome; use the layout primitives (Stack, Grid) instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { BlockContent, Columns, Heading, TextBlock, rt } from '@krackedui/motion';

export function ColumnsExample() {
  return (
    <BlockContent>
      <Columns>
        <div className="flex flex-col">
          <Heading level={3} text={rt('Left')} />
          <TextBlock text={rt('First column content.')} />
        </div>
        <div className="flex flex-col">
          <Heading level={3} text={rt('Right')} />
          <TextBlock text={rt('Second column content.')} />
        </div>
      </Columns>
    </BlockContent>
  );
}

Examples

Ratios

ratios sets each column’s share of the width (sum 1).

Three columns from a block tree

API Reference

Columns

Based on <div> and supports its props. Adds:

Accessibility

• Columns are plain layout; reading order follows the DOM (left to right, then top to bottom).
• There is no responsive stacking; columns stay side by side.