Animated Background
Visually highlights selected items by sliding a background into view when hovered over or clicked.
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/animated-background.jsonOr manually:
npm install motion-v clsx tailwind-mergeMore Examples
Card Grid
A grid of cards with a spring hover effect, using a custom layout and transition.
Dialog
Enhances modal presentations.
Popover
For small interactive overlays.
Accordion
Collapsible sections for more content.
Collapsible
Collapsible sections for more content.
Drag to Reorder
Reorder items with drag and drop.
Swipe to Delete
Delete items with swipe gestures.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | any[] | [] | Array of items to render. Each item should have a unique id or value. |
| v-model | string | number | undefined | The active item identifier. |
| enableHover | boolean | false | If true, changes selection on mouse enter instead of click. |
| layoutId | string | random | Unique ID for the layout animation group. |
| transition | Transition | spring | Custom motion transition settings. |
Source content adapted from Motion Primitives.