Components
Split View
A clean, minimal split view component with smooth draggable divider, inspired by Edge mobile and Apple UI design.
Installation
Loading installation instructions...
Usage
import { SplitView } from "@/components/pluto-ui/split-view"<SplitView
primary={<div>Left or top content</div>}
secondary={<div>Right or bottom content</div>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
primary | ReactNode | required | Content for the primary panel (left or top) |
secondary | ReactNode | required | Content for the secondary panel (right or bottom) |
direction | "horizontal" | "vertical" | "horizontal" | Split direction |
defaultRatio | number | 0.5 | Initial split ratio (0-1) |
minPrimarySize | number | 100 | Minimum size of primary panel in pixels |
minSecondarySize | number | 100 | Minimum size of secondary panel in pixels |
className | string | undefined | Custom className for the container |
primaryClassName | string | undefined | Custom className for the primary panel |
secondaryClassName | string | undefined | Custom className for the secondary panel |
dividerClassName | string | undefined | Custom className for the divider |
showHandle | boolean | true | Show divider handle |
onRatioChange | (ratio: number) => void | undefined | Callback when split ratio changes |
Examples
Basic Usage
Horizontal split view with two panels:
Vertical Split
Vertical split view for mobile-friendly layouts:
Custom Handle
Minimal design without the handle:
With Callback
Track ratio changes in real-time:
Features
- Smooth Dragging: Smooth and responsive drag interactions for both mouse and touch
- Touch-Friendly: Large touch targets optimized for mobile devices
- Minimal Design: Clean, Apple-like UI with subtle divider and handle
- Flexible Layouts: Support for both horizontal and vertical split directions
- Constraints: Configurable minimum panel sizes to prevent unusable layouts
- Theme-Aware: Fully supports light and dark themes
- Accessible: Proper ARIA attributes and keyboard support
Notes
- The divider is always draggable, even when the handle is hidden
- The component automatically constrains the ratio based on minimum panel sizes
- Touch events are handled with proper passive event listeners for smooth performance
- The divider provides visual feedback during dragging (color change and handle scale)
Split Flap Display
A split-flap display component with smooth flip animations using motion, like airport displays. Works with any text or content.
Sprite Animation
A sprite animation component that animates through frames from a sprite sheet using CSS background-image, background-size, and background-position.