Core Components
Number Effects
Interactive Elements
Advanced Effects
Radix UI Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Base UI Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Transition Panel#
Easy way to switch between different pieces of content with enter and exit animations. It's perfect for enhancing user experience in areas such as onboarding card, settings adjustments, or any interactive content that requires a visual transition between states.
Examples#
Tabs with Transition Panel#
Refining Visual Harmony
Explore the principles of motion aesthetics that enhance the visual appeal of interfaces. Learn to balance timing, easing, and the flow of motion to create seamless user experiences.
Card with Transition Panel#
Brand
Develop a distinctive brand identity with tailored logos and guidelines to ensure consistent messaging across all platforms.
Installation#
npx shadcn@latest add "https://components.dylanwlim.com/c/transition-panel.json"
Component API#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode[] | The content that the panel will transition through. | |
| className | string | Optional CSS class to apply to the panel container for additional styling. | |
| transition | Transition | The transition settings from motion to control the animation effects. | |
| activeIndex | number | The index of the currently active child element to display. | |
| variants | Object (with enter, center, exit properties) | Variants for each animation state (enter, center, exit) to customize animations. | |
| ...motionProps | MotionProps | Spread all additional motion props to the motion.div component. |
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.
Open DWL Components Create