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
Magnetic#
A magnetic effect for elements that allows them to be attracted to the mouse cursor.
Examples#
Magnetic Basic#
Magnetic Nested#
You can nest the Magnetic component to create a more complex effect. Here we use actionArea='global' to make the magnetic effect apply to the global area. We also use custom range to make the magnetic effect apply to a larger area.
Installation#
npx shadcn@latest add "https://components.dylanwlim.com/c/magnetic.json"
Component API#
Magnetic#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The child elements to be displayed within the magnetic effect. | |
| intensity | number | 0.6 | The strength of the magnetic effect, scaling the distance effect. |
| range | number | 100 | The effective range in pixels within which the magnetic effect is applied. |
| actionArea | 'self' | 'parent' | 'global' | 'self' | Determines whether the magnetic effect is triggered by the component, its parent, or globally. |
| springOptions | SpringOptions | SPRING_CONFIG | The spring options to be used for the magnetic effect. |
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