Exploring UI/UX component code for dynamic and engaging web experiences.
This collection of re-usable components use Next.js↗↗, Tailwind CSS↗↗ and Typescript↗↗as default.
Components
Combobox
Accessible combobox code with Radix, cmdk, Tailwind CSS and Framer Motion.
Radix
cmdk
Tailwind CSS
Framer Motion
Tooltip
Tooltip that triggers when text is selected with Floating UI, Tailwind CSS and Framer Motion.
Floating UI
Tailwind CSS
Framer Motion
Select me
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos tempore officia porro! Voluptate sequi architecto vitae distinctio eum atque excepturi doloribus tempora. Explicabo, esse. Reprehenderit aliquam modi voluptates molestiae inventore.
Read More Button
Button read more with Tailwind CSS and Framer Motion.
Tailwind CSS
Framer Motion
Hover me
Magnetic Effect
Magnetic effect with Tailwind CSS and Framer Motion.
Tailwind CSS
Framer Motion
Hover me
Magnettic button
External Link
External link inline text with Tailwind CSS.
Tailwind CSS
Keyboard
Keyboard animation with Tailwind CSS.
Tailwind CSS
Click me
Color Picker
Color picker modal with Tailwind CSS, lucid icon and Base UI.
Tailwind CSS
Base UI
référence anim : https://www.toni.li/about
Dynamic blur scroll
Blur scroll animation with Tailwind CSS and Framer Motion.
Tailwind CSS
Framer Motion
HEADER
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt quo harum vero quaerat ab maxime illum iusto, fugiat ea soluta, rem deleniti, atque minima! Reprehenderit nostrum sint provident ipsam enim! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt quo harum vero quaerat ab maxime illum iusto, fugiat ea soluta, rem deleniti, atque minima! Reprehenderit nostrum sint provident ipsam enim! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt quo harum vero quaerat ab maxime illum iusto, fugiat ea soluta, rem deleniti, atque minima! Reprehenderit nostrum sint provident ipsam enim! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt quo harum vero quaerat ab maxime illum iusto, fugiat ea soluta, rem deleniti, atque minima! Reprehenderit nostrum sint provident ipsam enim! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt quo harum vero quaerat ab maxime illum iusto, fugiat ea soluta, rem deleniti, atque minima! Reprehenderit nostrum sint provident ipsam enim!Déplacez les points pour modifier la flèche ou cliquez ailleurs pour la déplacer entièrement.
Cliquez et maintenez pour dessiner une nouvelle flèche, ou cliquez sur une flèche existante pour la modifier.