Accordion Frames
A horizontal focus accordion: a row of thin image slats that spring open to a wide panel on hover (or tap), with a bordered focus indicator and light beams that track the open frame. Pure React, motion handled entirely by one CSS transition.
npx shadcn@latest add https://ui.aryank.space/r/accordion-frames.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | spotlight-1…20 (Compronents assets) | Panel image URLs. The accordion shows up to desktopCount of them. |
| desktopCount | number | 20 | How many panels to show on wide viewports. |
| mobileCount | number | 10 | How many panels to show below mobileBreakpoint. |
| expandedWidth | number | 400 | Open-panel width in px on desktop. |
| mobileExpandedWidth | number | 100 | Open-panel width in px on mobile. |
| collapsedWidth | number | 20 | Resting slat width in px. |
| gap | number | 5 | Gap between slats in px. |
| panelHeight | number | 400 | Track height in px on desktop. |
| mobilePanelHeight | number | 260 | Track height in px on mobile. |
| mobileBreakpoint | number | 1000 | Viewport width under which the mobile layout applies. |
| defaultFocus | number | 0 | Index of the panel open on first paint. |
| focusIndicator | boolean | true | Draw the bordered focus box with the vertical beams. |
| accentColor | string | "#ffffff" | Focus indicator and beam color. |
| background | string | "#0f0f0f" | Frame background color. |
accentColorcolorFocus indicator border and the vertical beam color.
backgroundcolorFrame backdrop behind the panels.
expandedWidthtextOpen-panel width in px; the resting slats stay thin.
imagesasset-urlPanel images, hosted through https://ui.aryank.space/assets/accordion-frames/spotlight-1.jpg and the rest of the numbered set.
None.