Stack

Server component, no client JS

ImportCopy Anchor Link

import { Stack } from '@nizivo/react/stack';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/stack.css';

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Stack } from '@nizivo/react/stack';

export function StackExample(): JSX.Element {
  return (
    <Stack gap="4">
      <div>Order #1040</div>
      <div>Paid</div>
      <Stack gap="2" render={<ul />}>
        <li>Stoneware mug</li>
        <li>Linen napkins</li>
      </Stack>
    </Stack>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

LayoutGap type

import type { LayoutGap } from '@nizivo/react/stack'

A --nz-space-* key: '4' is --nz-space-4 (1rem), '0-5' is --nz-space-0-5. Token keys only.

type LayoutGap = "0" | "0-5" | "1" | "1-5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24"

StackProps type

import type { StackProps } from '@nizivo/react/stack'

The props of Stack, listed above.

StackState type

import type { StackState } from '@nizivo/react/stack'

The render state of Stack, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-stack.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none