Animated Background

Visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations

Animated Background

Examples

Animated Tabs

Animated Tabs Hover

Animated Card Background

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.

Segmented Control

Installation

npx shadcn@latest add "https://components.dylanwlim.com/c/animated-background.json"

Component API

Prop	Type	Default	Description
children	ReactElement with 'data-id' string attribute array or single element		The content to be displayed within the animated background. Each child must have a unique `data-id` attribute to ensure correct functionality.
defaultValue	string		The default value to be used as the active item identifier.
onValueChange	(newActiveId: string \| null) => void		Callback function that is called when the active item changes.
className	string		The class name to apply to the animated background for custom styling.
transition	Transition		The transition effect from motion for animation effects.
enableHover	boolean	false	Enables or disables the hover effect. When `enableHover` is true, spacing between children cannot be added.

Accordion Animated Group

On This Page

Animated Background Examples Animated Tabs Animated Tabs Hover Animated Card Background Segmented Control Installation Component API

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.