Skip to content
38

Split View

SourceReport issue

Two-pane master/detail layout with a draggable, keyboard-accessible divider and min/max bounds, built on shadcn Resizable.

Example

Installation

npx shadcn@latest add https://hirael.com/r/split-view.json

Usage

import { SplitView, SplitViewPanel, SplitViewResizer } from "@/components/split-view"

Paths assume the default @/ alias from your components.json. The example above shows the parts composed.

API

<SplitView />

+ native element props

No props of its own; forwards everything to the underlying element.

<SplitViewPanel />

+ native element props

No props of its own; forwards everything to the underlying element.

<SplitViewResizer />

+ native element props
PropTypeDefault
withHandlebooleannone

Component source

import * as React from 'react';

import { cn } from '@/lib/utils';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/hirael/bases/radix/ui/resizable';

const SplitView = ({ className, ...props }: React.ComponentProps<typeof ResizablePanelGroup>) => {
  return (
    <ResizablePanelGroup
      data-slot="split-view"
      className={cn('overflow-hidden rounded-lg border border-border bg-card', className)}
      {...props}
    />
  );
};

const SplitViewPanel = ({ className, ...props }: React.ComponentProps<typeof ResizablePanel>) => {
  return (
    <ResizablePanel
      data-slot="split-view-panel"
      className={cn('min-h-0 min-w-0 overflow-auto', className)}
      {...props}
    />
  );
};

const SplitViewResizer = (props: React.ComponentProps<typeof ResizableHandle>) => {
  return <ResizableHandle data-slot="split-view-resizer" withHandle {...props} />;
};

export { SplitView, SplitViewPanel, SplitViewResizer };

Dependencies

shadcn registry

resizable