A settings panel that drills into pages and back. Swipe back reveals the parent underneath.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/stack-panelPlayground
Appearance
Notifications
Account
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/stack-panel
Accessibility
- Each page is a region labelled by its title.
- After a push, focus moves to the new heading. After a pop, it returns to the row.
- Choice rows are radios.
Motion
- Pages push in over 340 ms while the parent slides 18% left.
- Back reverses in 300 ms.
- Swipe from the left edge follows the finger. Past 40% or a flick pops.
- With reduced motion, pages swap. A swipe still follows the finger, without parallax.
Responsive behavior
- 384 wide on Web and 358 on Mobile. Rows are 44 and 52 px.
Performance
- Only the current page renders, plus its parent as an inert layer under a swipe.
- Swipe back is one motion value, so dragging re-renders nothing until it settles.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import StackPanel from @/components/fetaui/stack-panel after installing it. pages and root are required.
- Rows are link, choice, switch, value or danger. A link's to must be a key in pages.
- Switch rows report through onChange and danger rows through onSelect. Choice rows report through onChoiceChange with the group and row id.
- onPathChange reports the path, and defaultPath starts deeper in. Composes Button and Switch.
Related
SheetComponentContent that complements the page, sliding in from an edge and floating 8 px in from it.SidebarComponentNav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.SwitchComponentTurns a setting on or off and applies it at once.ProfileProBlockA profile page: cover, avatar, bio, links and counts, with tabs between an activity feed and projects.DrawerComponentA panel from the edge of the screen: a floating side panel on Web and a bottom sheet on Mobile.