


Recipes
Code snippets for modern user interface techniques.
Highlight
Artificial Delay
Refresh React Server Component on Focus
Animated Counter
Responsive Line Chart
Magnified Dock
Spotlight
Gradient Border
Animated Tabs
iOS Animated Switch
Multistep Wizard
Trello Checklist
Await Component
Use Suspense without creating a new component.
Animated Number
Use Framer Motion to animate a number in React.
Animated List
Use Framer Motion to add mount and unmount animations to items in a list.
Apple Selector Group
A styled radio group inspired by Apple.com's checkout. Built with Radix.
Animated Toast
A global alert built with Radix UI and Framer Motion.
Fixed Header
A site header that smoothly grows and shrinks on scroll.