Snippet

Collections of ui components built by smintfy. Check out the repository here.

Image preview

Interaction built using shared layout animations and Radix dialog primitive. View source

image-preview.tsx

reactradixmotiontailwind

Multi-step flow

This is a multi-step component guiding users through a process or for an onboarding. View source

multi-step.tsx

This is step one

This is a multi-step component. It's a great way to guide users through a process.

reactmotiontailwind

Family style OTP

Recreating OTP component from Family built on top of otp-input by guilhermerodz. And by the way, the correct code is "123456". View source

family-style-otp.tsx

Verification Code

We've sent you a verification code.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Didn't receive a code?

reactmotiontailwind

Fruit spin

A playful fruit spin game component inspired by Honk. And by the way, please don't gamble. View source

fruit-spin.tsx

🍒

🍌

🫐

Drag to Spin

reactmotiontailwind