Layout System

Stable

A comprehensive suite of layout primitives (Container, Grid, Col, Stack, Row, LayoutDivider, Spacer) engineered for responsive cyberpunk and tech-forward interfaces.

Overview

Siber-UI provides a composable, token-aware layout architecture. Instead of writing repetitive CSS grid and flex classes, combine these atomic layout primitives to build robust, fluid, and responsive layouts across any screen size.

Container

Constrains max-width, centers content, and ensures consistent horizontal padding across viewports.

Grid & Col

12-column grid system with breakpoint overrides (smCols, mdCols, lgCols) and fluid auto-fill.

Stack & Row

Flexbox building blocks for vertical flow (Stack) and horizontal alignments (Row).

Container

The Container component centers your content horizontally, constrains it to standard breakpoint maximum widths, and applies responsive padding. Preset sizes include sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px), and full.

size="sm"max-w-screen-sm (640px)
size="md"max-w-screen-md (768px)
size="lg"max-w-screen-lg (1024px)
tsx
<Stack gap="md">
  <Container size="sm" className="border border-dashed border-cyan-500/40 p-4 rounded-lg bg-cyan-950/20">
    <Row justify="between" align="center">
      <span className="font-mono text-xs text-cyan-400 font-semibold">size="sm"</span>
      <span className="font-mono text-xs text-slate-500">max-w-screen-sm (640px)</span>
    </Row>
  </Container>

  <Container size="md" className="border border-dashed border-purple-500/40 p-4 rounded-lg bg-purple-950/20">
    <Row justify="between" align="center">
      <span className="font-mono text-xs text-purple-400 font-semibold">size="md"</span>
      <span className="font-mono text-xs text-slate-500">max-w-screen-md (768px)</span>
    </Row>
  </Container>

  <Container size="lg" className="border border-dashed border-emerald-500/40 p-4 rounded-lg bg-emerald-950/20">
    <Row justify="between" align="center">
      <span className="font-mono text-xs text-emerald-400 font-semibold">size="lg"</span>
      <span className="font-mono text-xs text-slate-500">max-w-screen-lg (1024px)</span>
    </Row>
  </Container>
</Stack>

12-Column Grid & Spans

By default, Grid sets up a 12-column layout. Use Col with span, start (column offset), and rowSpan to build standard and asymmetric grid compositions.

12-Column Base Grid

1
2
3
4
5
6
7
8
9
10
11
12
tsx
<Grid cols={12} gap="xs">
  {Array.from({ length: 12 }, (_, i) => (
    <Col key={i} span={1}>
      <div className="bg-cyan-500/10 border border-dashed border-cyan-500/40 text-cyan-300 p-2 rounded text-center font-mono text-xs">
        {i + 1}
      </div>
    </Col>
  ))}
</Grid>

Common Column Span Recipes

Col span={6} (50%)
Col span={6} (50%)
Col span={4} (33.3%)
Col span={4} (33.3%)
Col span={4} (33.3%)
Main Content: span={8} (66.6%)
Sidebar: span={4} (33.3%)
Centered Block: start={3} span={8}
tsx
<Stack gap="sm">
  {/* Halves (6 + 6) */}
  <Grid cols={12} gap="sm">
    <Col span={6}><GridCell accent="cyan">Col span={6} (50%)</GridCell></Col>
    <Col span={6}><GridCell accent="purple">Col span={6} (50%)</GridCell></Col>
  </Grid>

  {/* Thirds (4 + 4 + 4) */}
  <Grid cols={12} gap="sm">
    <Col span={4}><GridCell accent="cyan">Col span={4} (33.3%)</GridCell></Col>
    <Col span={4}><GridCell accent="purple">Col span={4} (33.3%)</GridCell></Col>
    <Col span={4}><GridCell accent="green">Col span={4} (33.3%)</GridCell></Col>
  </Grid>

  {/* Main + Sidebar (8 + 4) */}
  <Grid cols={12} gap="sm">
    <Col span={8}><GridCell accent="cyan">Main Content: span={8} (66.6%)</GridCell></Col>
    <Col span={4}><GridCell accent="purple">Sidebar: span={4} (33.3%)</GridCell></Col>
  </Grid>

  {/* Centered with Column Start (start={3} span={8}) */}
  <Grid cols={12} gap="sm">
    <Col start={3} span={8}>
      <GridCell accent="amber">Centered Block: start={3} span={8}</GridCell>
    </Col>
  </Grid>
</Stack>

Responsive Breakpoints

Layout follows a mobile-first responsive design approach. You can specify column counts directly on Grid using cols (base/mobile), smCols (640px+), mdCols (768px+), and lgCols (1024px+).

NODE_01
NODE_02
NODE_03
NODE_04
📱 Base: 1 col📟 sm (640px+): 2 cols💻 md (768px+): 3 cols🖥️ lg (1024px+): 4 cols
tsx
{/* 1 col on mobile -> 2 cols on sm -> 3 cols on md -> 4 cols on lg */}
<Grid cols={1} smCols={2} mdCols={3} lgCols={4} gap="md">
  <GridCell accent="cyan">NODE_01 (Mobile 1 / Desktop 4)</GridCell>
  <GridCell accent="purple">NODE_02 (Mobile 1 / Desktop 4)</GridCell>
  <GridCell accent="green">NODE_03 (Mobile 1 / Desktop 4)</GridCell>
  <GridCell accent="amber">NODE_04 (Mobile 1 / Desktop 4)</GridCell>
</Grid>

Responsive Column Spanning (smSpan, mdSpan, lgSpan)

Individual grid items can also adjust their spans dynamically. Here, the hero card spans 12 columns on mobile and tablet, but 8 columns on desktop.

Hero Cell: span={12} on mobile/tablet → lgSpan={8} on desktop
Sidebar Cell: span={12} on mobile/tablet → lgSpan={4} on desktop
tsx
<Grid cols={12} gap="md">
  <Col span={12} lgSpan={8}>
    <GridCell accent="cyan" className="min-h-[90px]">
      Hero Cell: span={12} on mobile/tablet → lgSpan={8} on desktop
    </GridCell>
  </Col>
  <Col span={12} lgSpan={4}>
    <GridCell accent="purple" className="min-h-[90px]">
      Sidebar Cell: span={12} on mobile/tablet → lgSpan={4} on desktop
    </GridCell>
  </Col>
</Grid>

Fluid Auto-Fill Grid

Set cols="auto" with minCellWidth to create a completely breakpoint-free responsive grid. The grid automatically fits as many cells as possible into each row while ensuring every cell meets the minimum width constraint.

Cluster Alpha
Cluster Beta
Cluster Gamma
Cluster Delta
Cluster Epsilon
Cluster Zeta
tsx
<Grid cols="auto" minCellWidth="180px" gap="md">
  <GridCell accent="cyan">Cluster Alpha</GridCell>
  <GridCell accent="purple">Cluster Beta</GridCell>
  <GridCell accent="green">Cluster Gamma</GridCell>
  <GridCell accent="amber">Cluster Delta</GridCell>
  <GridCell accent="cyan">Cluster Epsilon</GridCell>
  <GridCell accent="purple">Cluster Zeta</GridCell>
</Grid>

Gap Scale & Spacing

All layout components (Grid, Stack, Row) share standard Siber-UI gap spacing tokens: none (0px), xs (4px), sm (8px), md (16px), lg (24px), xl (32px), and 2xl (48px). You can also control row and column gaps separately via rowGap and colGap.

gap="xs" (4px)
xs
xs
xs
xs
gap="md" (16px)
md
md
md
md
gap="xl" (32px)
xl
xl
xl
xl
tsx
<Stack gap="lg">
  <div>
    <span className="font-mono text-xs text-slate-400 mb-2 block">gap="xs" (4px)</span>
    <Grid cols={4} gap="xs">
      <GridCell accent="cyan">xs</GridCell>
      <GridCell accent="cyan">xs</GridCell>
      <GridCell accent="cyan">xs</GridCell>
      <GridCell accent="cyan">xs</GridCell>
    </Grid>
  </div>

  <div>
    <span className="font-mono text-xs text-slate-400 mb-2 block">gap="md" (16px)</span>
    <Grid cols={4} gap="md">
      <GridCell accent="purple">md</GridCell>
      <GridCell accent="purple">md</GridCell>
      <GridCell accent="purple">md</GridCell>
      <GridCell accent="purple">md</GridCell>
    </Grid>
  </div>

  <div>
    <span className="font-mono text-xs text-slate-400 mb-2 block">gap="xl" (32px)</span>
    <Grid cols={4} gap="xl">
      <GridCell accent="green">xl</GridCell>
      <GridCell accent="green">xl</GridCell>
      <GridCell accent="green">xl</GridCell>
      <GridCell accent="green">xl</GridCell>
    </Grid>
  </div>
</Stack>

Stack & Row (Flexbox)

Stack is the fundamental vertical flex container for managing consistent vertical rhythm. Row is a horizontal wrapper for toolbars, inline badge groups, metadata badges, and split headers.

Stack (Vertical Flow)
Vertical Item 1
Vertical Item 2
Vertical Item 3
Row (Horizontal Flow)
A
B
C
tsx
<Grid cols={1} mdCols={2} gap="lg">
  {/* Vertical Stack */}
  <div className="p-4 rounded-xl border border-border-hairline bg-slate-900/60">
    <span className="font-mono text-xs text-cyan-400 uppercase tracking-wider block mb-4">
      Stack (Vertical Flow)
    </span>
    <Stack gap="sm">
      <GridCell accent="cyan">Vertical Item 1</GridCell>
      <GridCell accent="cyan">Vertical Item 2</GridCell>
      <GridCell accent="cyan">Vertical Item 3</GridCell>
    </Stack>
  </div>

  {/* Horizontal Row */}
  <div className="p-4 rounded-xl border border-border-hairline bg-slate-900/60">
    <span className="font-mono text-xs text-purple-400 uppercase tracking-wider block mb-4">
      Row (Horizontal Flow)
    </span>
    <Row gap="sm">
      <GridCell accent="purple" className="flex-1">A</GridCell>
      <GridCell accent="purple" className="flex-1">B</GridCell>
      <GridCell accent="purple" className="flex-1">C</GridCell>
    </Row>
  </div>
</Grid>

Alignment & Justify

Both Stack and Row support fine-grained cross-axis alignment (align) and main-axis distribution (justify).

justify="between"
Left
Right
justify="center"
Center 1
Center 2
justify="evenly"
Even 1
Even 2
Even 3
tsx
<Stack gap="md">
  {/* justify="between" */}
  <div>
    <span className="font-mono text-xs text-slate-400 mb-1 block">justify="between"</span>
    <Row justify="between" align="center" className="p-3 rounded-lg border border-dashed border-cyan-500/30 bg-cyan-950/20">
      <GridCell accent="cyan" className="w-24">Left</GridCell>
      <GridCell accent="cyan" className="w-24">Right</GridCell>
    </Row>
  </div>

  {/* justify="center" */}
  <div>
    <span className="font-mono text-xs text-slate-400 mb-1 block">justify="center"</span>
    <Row justify="center" gap="md" align="center" className="p-3 rounded-lg border border-dashed border-purple-500/30 bg-purple-950/20">
      <GridCell accent="purple" className="w-24">Center 1</GridCell>
      <GridCell accent="purple" className="w-24">Center 2</GridCell>
    </Row>
  </div>

  {/* justify="evenly" */}
  <div>
    <span className="font-mono text-xs text-slate-400 mb-1 block">justify="evenly"</span>
    <Row justify="evenly" align="center" className="p-3 rounded-lg border border-dashed border-emerald-500/30 bg-emerald-950/20">
      <GridCell accent="green" className="w-20">Even 1</GridCell>
      <GridCell accent="green" className="w-20">Even 2</GridCell>
      <GridCell accent="green" className="w-20">Even 3</GridCell>
    </Row>
  </div>
</Stack>

Divider & Spacer

LayoutDivider creates subtle, gradient-faded horizontal or vertical separation lines. Spacer acts as an auto-expanding flex element to push items apart inside any Row or Stack.

Cluster Security Telemetry
ONLINE
UPTIME99.98%
LATENCY0.42 ms
THREAT LEVELLOW
tsx
<Card className="p-6">
  {/* Header with Spacer */}
  <Row align="center">
    <div className="flex items-center gap-2">
      <Layers className="h-5 w-5 text-cyan-400" />
      <span className="font-semibold text-white">Cluster Security Telemetry</span>
    </div>
    
    {/* Spacer pushes the badge and button to the far right */}
    <Spacer />
    
    <Row gap="sm" align="center">
      <Badge variant="neon" dot dotColor="green" size="sm">ONLINE</Badge>
      <Button variant="ghost" size="sm">Configure</Button>
    </Row>
  </Row>

  <LayoutDivider className="my-5" />

  {/* Content with vertical divider */}
  <Row align="center" justify="around">
    <Stack gap="xs" align="center">
      <span className="text-xs font-mono text-slate-400">UPTIME</span>
      <span className="text-lg font-bold font-mono text-cyan-400">99.98%</span>
    </Stack>

    <LayoutDivider orientation="vertical" className="h-10" />

    <Stack gap="xs" align="center">
      <span className="text-xs font-mono text-slate-400">LATENCY</span>
      <span className="text-lg font-bold font-mono text-emerald-400">0.42 ms</span>
    </Stack>

    <LayoutDivider orientation="vertical" className="h-10" />

    <Stack gap="xs" align="center">
      <span className="text-xs font-mono text-slate-400">THREAT LEVEL</span>
      <span className="text-lg font-bold font-mono text-purple-400">LOW</span>
    </Stack>
  </Row>
</Card>

Dashboard Composition

Here is a complete, real-world example illustrating how Container, Grid, Col, Stack, and Row seamlessly compose to structure high-density, cyberpunk-styled dashboard pages.

SIBER / CORE / TELEMETRY

Quantum Node Dashboard

ALL SYSTEMS NORMAL
Active Nodes12 / 16+2 online today
Compute Load42.8%Balanced cluster
Network Bandwidth9.4 TB/s99.9% throughput
Security ProtocolACTIVE0 breaches

Distributed Node Clusters

Live real-time node telemetry stream

3 Nodes
NODE_ALPHA_01192.168.1.10432% load
Active
NODE_BETA_02192.168.1.10568% load
Active
NODE_GAMMA_03192.168.1.10614% load
Standby

System Log

Real-time node events

[21:42:01] Quantum link synced
[21:42:15] Load rebalanced (+4%)
[21:42:30] Security handshake OK
tsx
<Container size="xl" className="space-y-6">
  {/* Header Row */}
  <Row justify="between" align="center" wrap gap="md">
    <Stack gap="xs">
      <Row gap="sm" align="center">
        <Terminal className="h-5 w-5 text-cyan-400" />
        <span className="font-mono text-cyan-400 text-xs tracking-widest uppercase">SIBER / CORE / TELEMETRY</span>
      </Row>
      <h2 className="text-xl font-bold text-white tracking-tight">Quantum Node Dashboard</h2>
    </Stack>

    <Row gap="sm" align="center">
      <Badge variant="neon" dot dotColor="green">ALL SYSTEMS NORMAL</Badge>
      <Button variant="neon" size="sm" rightIcon={<ArrowRight className="h-3.5 w-3.5" />}>
        DEPLOY NODE
      </Button>
    </Row>
  </Row>

  {/* Stat Cards: Responsive 4-Column Grid */}
  <Grid cols={1} smCols={2} lgCols={4} gap="md">
    <Card accentLine="cyan" variant="neon">
      <CardContent className="p-4">
        <Row justify="between" align="start">
          <Stack gap="xs">
            <span className="font-mono text-[11px] text-slate-400 uppercase">Active Nodes</span>
            <span className="text-2xl font-bold font-mono text-cyan-400">12 / 16</span>
            <span className="text-[11px] text-emerald-400 font-mono">+2 online today</span>
          </Stack>
          <Server className="h-5 w-5 text-cyan-400" />
        </Row>
      </CardContent>
    </Card>

    <Card accentLine="purple">
      <CardContent className="p-4">
        <Row justify="between" align="start">
          <Stack gap="xs">
            <span className="font-mono text-[11px] text-slate-400 uppercase">Compute Load</span>
            <span className="text-2xl font-bold font-mono text-purple-400">42.8%</span>
            <span className="text-[11px] text-slate-500 font-mono">Balanced cluster</span>
          </Stack>
          <Cpu className="h-5 w-5 text-purple-400" />
        </Row>
      </CardContent>
    </Card>

    <Card accentLine="green">
      <CardContent className="p-4">
        <Row justify="between" align="start">
          <Stack gap="xs">
            <span className="font-mono text-[11px] text-slate-400 uppercase">Network Bandwidth</span>
            <span className="text-2xl font-bold font-mono text-emerald-400">9.4 TB/s</span>
            <span className="text-[11px] text-emerald-400 font-mono">99.9% throughput</span>
          </Stack>
          <Wifi className="h-5 w-5 text-emerald-400" />
        </Row>
      </CardContent>
    </Card>

    <Card accentLine="cyan">
      <CardContent className="p-4">
        <Row justify="between" align="start">
          <Stack gap="xs">
            <span className="font-mono text-[11px] text-slate-400 uppercase">Security Protocol</span>
            <span className="text-2xl font-bold font-mono text-cyan-400">ACTIVE</span>
            <span className="text-[11px] text-emerald-400 font-mono">0 breaches</span>
          </Stack>
          <ShieldCheck className="h-5 w-5 text-cyan-400" />
        </Row>
      </CardContent>
    </Card>
  </Grid>

  {/* Main 8+4 Asymmetric Grid */}
  <Grid cols={12} gap="md">
    <Col span={12} lgSpan={8}>
      <Card className="h-full">
        <CardHeader>
          <Row justify="between" align="center">
            <div>
              <CardTitle>Distributed Node Clusters</CardTitle>
              <CardDescription>Live real-time node telemetry stream</CardDescription>
            </div>
            <Badge variant="secondary" size="sm">3 Nodes</Badge>
          </Row>
        </CardHeader>
        <CardContent>
          <Stack gap="sm">
            {[
              { id: 'NODE_ALPHA_01', ip: '192.168.1.104', load: '32%', status: 'Active' },
              { id: 'NODE_BETA_02', ip: '192.168.1.105', load: '68%', status: 'Active' },
              { id: 'NODE_GAMMA_03', ip: '192.168.1.106', load: '14%', status: 'Standby' },
            ].map((node) => (
              <Row key={node.id} justify="between" align="center" className="p-3 rounded-lg bg-white/[0.02] border border-border-hairline font-mono text-xs">
                <span className="text-cyan-400 font-semibold">{node.id}</span>
                <span className="text-slate-400">{node.ip}</span>
                <span className="text-purple-400">{node.load} load</span>
                <Badge variant="neon" size="sm">{node.status}</Badge>
              </Row>
            ))}
          </Stack>
        </CardContent>
      </Card>
    </Col>

    <Col span={12} lgSpan={4}>
      <Card className="h-full">
        <CardHeader>
          <CardTitle>System Log</CardTitle>
          <CardDescription>Real-time node events</CardDescription>
        </CardHeader>
        <CardContent>
          <Stack gap="sm" className="font-mono text-xs">
            <div className="p-2.5 rounded bg-cyan-500/10 border border-cyan-500/20 text-cyan-300">
              [21:42:01] Quantum link synced
            </div>
            <div className="p-2.5 rounded bg-purple-500/10 border border-purple-500/20 text-purple-300">
              [21:42:15] Load rebalanced (+4%)
            </div>
            <div className="p-2.5 rounded bg-emerald-500/10 border border-emerald-500/20 text-emerald-300">
              [21:42:30] Security handshake OK
            </div>
          </Stack>
        </CardContent>
      </Card>
    </Col>
  </Grid>
</Container>

API Reference

Container

Props for the Container component.

PROPERTIES (2)← swipe to inspect →
PropertyDescriptionTypeDefault
size
Maximum width constraint presets.
"sm" | "md" | "lg" | "xl" | "2xl" | "full"
"xl"
className
Additional Tailwind CSS classes.
string
undefined

Grid

Props for the Grid component.

PROPERTIES (9)← swipe to inspect →
PropertyDescriptionTypeDefault
cols
Default column count (1-12) or "auto" for fluid auto-fill mode.
number | "auto"
12
smCols
Column count at sm breakpoint (640px+).
number
undefined
mdCols
Column count at md breakpoint (768px+).
number
undefined
lgCols
Column count at lg breakpoint (1024px+).
number
undefined
gap
Uniform gap size between rows and columns.
"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
"md"
rowGap
Overrides row gap spacing.
"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
undefined
colGap
Overrides column gap spacing.
"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
undefined
minCellWidth
Minimum cell width when cols="auto".
string
"240px"
stretch
Stretches grid items to match row height.
boolean
false

Col

Props for the Col child component.

PROPERTIES (6)← swipe to inspect →
PropertyDescriptionTypeDefault
span
Number of columns to span (1-12) or "full".
number | "full"
1
smSpan
Column span at sm breakpoint (640px+).
number | "full"
undefined
mdSpan
Column span at md breakpoint (768px+).
number | "full"
undefined
lgSpan
Column span at lg breakpoint (1024px+).
number | "full"
undefined
rowSpan
Number of rows to span (1-6).
number
undefined
start
Starting column position (col-start-N).
number
undefined

Stack & Row

Props for Stack (vertical flex) and Row (horizontal flex).

PROPERTIES (6)← swipe to inspect →
PropertyDescriptionTypeDefault
direction
Flex direction (Stack only).
"vertical" | "horizontal"
"vertical"
gap
Spacing between flex items.
"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
"md"
align
Cross-axis alignment (align-items).
"start" | "center" | "end" | "stretch" | "baseline"
"stretch" (Stack) / "center" (Row)
justify
Main-axis distribution (justify-content).
"start" | "center" | "end" | "between" | "around" | "evenly"
"start"
wrap
Allows flex items to wrap onto multiple lines.
boolean
false
full
Sets width to 100% (w-full).
boolean
false

LayoutDivider & Spacer

Props for layout separation utilities.

PROPERTIES (2)← swipe to inspect →
PropertyDescriptionTypeDefault
orientation
Divider direction (horizontal or vertical).
"horizontal" | "vertical"
"horizontal"
className
Custom styling for divider or spacer.
string
undefined