Ouro HX

Layout

Resizable

Panels side by side (or stacked) with a draggable handle between each pair: a file list beside an editor, a preview above a console. Each handle is a window splitter for screen readers, named after the panel before it ("Resize Files"), and works with a mouse, touch (a 44px hit area) and the keyboard: the arrow keys, Home, End and Enter. Sizes are percentages; autoSaveId keeps the layout across visits.

Ingredients
Method

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/resizable#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/resizable

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/resizable#v1.2.13 ourostack/ouro-ui/resizable-tests#v1.2.13
import { Resizable } from "@/components/ouro/resizable/resizable";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<Resizable autoSaveId="editor" className="h-96">
  <ResizablePanel label="Files" defaultSize={25} minSize={15}>
    <FileTree />
  </ResizablePanel>
  <ResizablePanel label="Editor">
    <Editor />
  </ResizablePanel>
</Resizable>

Use instead when

  • Use a plain grid instead when the user never needs to change the sizes, and Sheet for a side panel that opens and closes.

Props

Type: ResizableProps.

autoSaveId
Type: string
Saves the layout in localStorage under this id and restores it on the next visit, after hydration (the server renders the default sizes). Storage that is unavailable or full is ignored.
children (required)
Type: ReactNode
Two or more ResizablePanel elements, as direct children. A handle goes between each pair.
className
Type: string
Layout only: the group fills its container; give it a size (h-96) or margins. Appearance classes warn in development.
handleLabel
Type: string
Default: "Resize {panel}"
Each handle's accessible name; {panel} is the label of the panel before it.
onLayout
Type: ((sizes: number[]) => void)
Called with every panel's size, in percent, when the user finishes a drag or presses a key on a handle.
orientation
Type: "vertical" | "horizontal"
Default: "horizontal"
horizontal puts the panels side by side; vertical stacks them (give the group a height).

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

  • direction: Not a prop. Ouro UI names it orientation: <Resizable orientation="vertical">.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2). Your classes always win over Ouro UI's: Resizable merges className last with cn (tailwind-merge), so a class that conflicts with its own replaces it.layout-classes

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.

Claim sources

Source on GitHubThis page as Markdown