# antuikit / Splitter

> Splitter with a rail at the theme's line width, a grip that shows on hover, and collapse chevrons from your icon pack.

Docs: https://antuikit.com/docs/components/splitter

## Install

npx antuikit@latest init
npx antuikit@latest add splitter

## Import

import { Splitter } from "@/components/ui/splitter";

## Demos

- [Basic](https://ui.antuikit.com/embed/splitter/basic.md): Put two `Splitter.Panel`s in a `Splitter` with a height, and set `defaultSize`, `min` and `max` on the one you want to size.
- [Vertical](https://ui.antuikit.com/embed/splitter/vertical.md): Set `orientation="vertical"` to stack the panels and drag the bar up and down.
- [Emphasis](https://ui.antuikit.com/embed/splitter/emphasis.md): Set `emphasis` to `subtle` for a line that shows on hover, `default` for a thin line, or `strong` for a wider bar.
- [Grip](https://ui.antuikit.com/embed/splitter/grip.md): Set `grip` to `"auto"` to show the drag handle on hover, focus or drag, `true` to always show it, or `false` to hide it.
- [Multiple panels](https://ui.antuikit.com/embed/splitter/multiple.md): Add a third `Splitter.Panel` for three resizable panels, with `collapsible` on the ones that can fold away.
- [Collapsible](https://ui.antuikit.com/embed/splitter/collapsible.md): Add `collapsible` to a panel for collapse buttons on its bar, or `{ start, end }` to collapse it in both directions.
- [Collapse animation](https://ui.antuikit.com/embed/splitter/collapse-motion.md): Set `collapsible.motion` on the `Splitter` to animate panels as they collapse and expand, which is off by default.
- [Collapse buttons](https://ui.antuikit.com/embed/splitter/collapsible-icon.md): Set a panel's `collapsible.showCollapsibleIcon` to show its collapse buttons on hover (`"auto"`), always or never.
- [Controlled](https://ui.antuikit.com/embed/splitter/controlled.md): Keep the sizes in state, pass each one as a panel's `size` and update them from `onResize`.
- [Locked panel](https://ui.antuikit.com/embed/splitter/resizable.md): Set `resizable={false}` on a panel to lock its size so its bar cannot be dragged.
- [Reset on double-click](https://ui.antuikit.com/embed/splitter/reset.md): Handle `onDraggerDoubleClick` to put the panels back to their starting sizes when someone double-clicks a bar.
- [Lazy resize](https://ui.antuikit.com/embed/splitter/lazy.md): Add `lazy` to show a preview line while dragging and resize the panels only when the drag ends.
- [Nested splitters](https://ui.antuikit.com/embed/splitter/nested-group.md): Put a vertical `Splitter` inside a panel of a horizontal one to split the screen both ways.
- [Editor layout](https://ui.antuikit.com/embed/splitter/editor-layout.md): A code editor with a collapsible file tree, the open file in the middle and an inspector panel on the right.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/splitter`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Splitter` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.