A list with a detail panel hinged to its edge. Choosing a row swings the panel open toward you from where the list ends, so the detail visibly belongs to the row you chose, and closing swings it back onto the list. The panel itself is flat, readable content.
Files · 8
Dependencies
npm packages
@radix-ui/react-slot
clsx
lucide-react
tailwind-merge
Registry items
https://caliperui.site/r/styles.json
Registry Items
hinge-panel
Configuration
Name
hinge-panel
Type
UI
Description
A list with a detail panel hinged to its edge. Choosing a row swings the panel open toward you from where the list ends, so the detail visibly belongs to the row you chose, and closing swings it back onto the list. The panel itself is flat, readable content.