Description:
Fancy Switch is a lightweight React component that helps developers create customizable, user-friendly, smoothly sliding segmented controls in apps.
How to use it:
1. Download and import the ‘FancySwitch’ component.
import React, { useState } from 'react'
import { FancySwitch } from '@/components/fancy-switch'2. Create a basic fancy switch styled with shadcn/UI:
const orderTypes: string[] = ['React', 'Angular', 'Vue']
export const App = () => {
const [orderType, setOrderType] = useState<string>()
return (
<FancySwitch
value={orderType}
onChange={(value) => setOrderType(value)}
options={orderTypes}
className="flex rounded-full bg-muted p-2"
highlighterClassName="bg-primary rounded-full"
radioClassName={cn(
'relative mx-2 flex focus:outline-none h-9 cursor-pointer items-center justify-center rounded-full px-3.5 text-sm font-medium transition-colors data-[checked]:text-primary-foreground'
)}
highlighterIncludeMargin={true}
/>
)
}3. All possible component props:
value?: OptionValue onChange?: (value: OptionValue) => void options: OptionType[] valueKey?: string labelKey?: string radioClassName?: string highlighterClassName?: string highlighterIncludeMargin?: boolean
Preview:
