Split

Server component, no client JS

ImportCopy Anchor Link

import { Split } from '@nizivo/react/split';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/split.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.

LayoutCopy Anchor Link

08's pages draw "Columns" frames: a main column and an aside, the grid's gutter apart (24 px on desktop). Split.Aside asks for its width, 360 px (aside="wide", the Overview's 8 + 4 split) or 232 px (aside="narrow", Settings' section nav), and Split.Main takes the rest. When the main column would get less than 60 % of the row, the two stack, in source order: put the aside after the main column for a side panel, or first for a section nav. It follows the Split's own width, so it works the same in a dashboard, a dialog or a narrow card. Give the aside a landmark through render, for example render={<aside aria-label="Goals" />} or render={<nav aria-label="…" />}.

Hooks: --nz-split-gap, --nz-split-aside-width, --nz-split-main-min.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Card } from '@nizivo/react/card';
import { Text } from '@nizivo/react/text';
import { Split } from '@nizivo/react/split';

export function SplitExample(): JSX.Element {
  return (
    <Split.Root>
      <Split.Main>
        <Card.Root>
          <Card.Header>
            <Card.Title>Revenue</Card.Title>
          </Card.Header>
          <Card.Body>
            <Text>The main column takes the rest of the row.</Text>
          </Card.Body>
        </Card.Root>
      </Split.Main>
      <Split.Aside render={<aside aria-label="Goals" />}>
        <Card.Root>
          <Card.Header>
            <Card.Title>Goals</Card.Title>
          </Card.Header>
          <Card.Body>
            <Text>The aside is 360 px wide beside it.</Text>
          </Card.Body>
        </Card.Root>
      </Split.Aside>
    </Split.Root>
  );
}

import type { JSX } from 'react';
import { Card } from '@nizivo/react/card';
import { Text } from '@nizivo/react/text';
import { Split } from '@nizivo/react/split';

export function SplitNarrowExample(): JSX.Element {
  return (
    <Split.Root aside="narrow">
      <Split.Aside render={<nav aria-label="Settings sections" />}>
        <Text>Store details · Payments · Shipping</Text>
      </Split.Aside>
      <Split.Main>
        <Card.Root>
          <Card.Header>
            <Card.Title>Store details</Card.Title>
          </Card.Header>
          <Card.Body>
            <Text>The content column.</Text>
          </Card.Body>
        </Card.Root>
      </Split.Main>
    </Split.Root>
  );
}

Other exportsCopy Anchor Link

SplitAsideProps type

import type { SplitAsideProps } from '@nizivo/react/split'

The props of Split.Aside, listed above.

SplitAsideWidth type

import type { SplitAsideWidth } from '@nizivo/react/split'

wide is 08's 360 px aside (the 8 + 4 split); narrow its 232 px Settings nav column.

type SplitAsideWidth = "narrow" | "wide"

SplitMainProps type

import type { SplitMainProps } from '@nizivo/react/split'

The props of Split.Main, listed above.

SplitRootProps type

import type { SplitRootProps } from '@nizivo/react/split'

The props of Split.Root, 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-split, .nz-split-aside, .nz-split-main.

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