Switch

Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Built on Radix UI Switch.

Library

Fluid Functionalism

Framework

React

Type

ui

License

MIT

Dependencies

@radix-ui/react-switch, motion

Install

npx shadcn@latest add @fluid/switch

Files

• registry/radix/switch.tsx
• registry/default/lib/utils.ts
• registry/default/lib/springs.ts
• registry/default/lib/font-weight.ts
• registry/default/lib/shape-context.tsx
• registry/default/lib/size-context.tsx
• registry/default/lib/type-scale.ts
• lib/type-scale.ts

Source

https://github.com/mickadesign/fluid-functionalism

Categories

• Input Components
• React Input Components
• Tailwind CSS Input Components
• Animated Input Components
• Switch Components
• React Switch Components
• Tailwind CSS Switch Components
• Animated Switch Components

More from Fluid Functionalism

• Switch (Base UI)
• Accordion
• Accordion (Base UI)
• Ask User Questions
• Badge
• Banner
• Breadcrumb
• Button
• Button (Base UI)
• Calendar
• Card
• Carousel Dots