Cnippet UI is a production-ready, curated set of accessible and composable React components—built with Base UI and Tailwind CSS. Copy, paste, and ship stunning interfaces faster.
(No description)
Hero inline — adjectives flip inside a heading with primary colour accent
CTA button — action verbs flip inside a full-width button for a sense of urgency
Testimonial card — audience descriptor cycles in a pull-quote layout
Portfolio wall — three rows of project shots under a studio intro
Template gallery — two rows of site templates
Multi-depth — rows moving at different speeds for a layered hero
Case studies — cards with results scroll sideways while pinned
Company timeline — milestones by year on a horizontal track
Photo gallery — tall images in a fast horizontal strip
Navigation links — letters rotate upward on hover with colour change between faces
CTA buttons — filled and outlined buttons with opposite rotateDirection values
Direction showcase — four rows compare top, right, bottom, and left rotations
Navigation links — each link swaps independently on hover
CTA buttons — filled and outlined buttons with opposite swap directions
Stats row — labels use center-out stagger beneath stat figures
Product launch — the lid opens onto a wallpaper with a NEW badge
App screen — custom UI rendered on the laptop screen
Demo video — a video poster with player controls on screen
Auto-cycling hero words — four short action words blur-dissolve in sequence
Tech stack card — stack names morph inside a product card
Hero section — morphing headline anchored by static eyebrow and body copy
Smooth blur-based morphing between words
Floating shapes — geometric shapes at different depths follow the cursor
Floating card — card with glow blobs and dot accents at independent depth layers
Floating symbols — abstract symbols drift at different depths following cursor
List fade — content list with progressive blur fade at the bottom
Gallery edges — horizontal row of cards with left and right edge blur
Nav overflow — horizontal nav bar with right-edge blur for overflow indication
Navigation links — each link shuffles independently on hover
CTA buttons — two buttons with reverse prop contrast for visual distinction
Tag chips — technology tags inside pill badges shuffle on hover
Hero headline — letters roll up with tight stagger on mount
Stacked display lines — three lines with incremental delay offsets
Navigation links — roll down from above with per-item delay
Hero inline — adjectives rotate inside a heading with stable width
Framed CTA — action phrases rotate inside a bordered card
Testimonial audience — direction down cycles target audience descriptor
Navigation links — each link scrambles independently on hover
Hero heading — center reveal direction for a symmetric decode
Repository card — title and metadata scramble with different settings
Site header — hides while reading down, returns on scroll up
Mobile tab bar — a bottom bar that slides away while browsing
Docs toolbar — stays while reading, slides away on scroll up
Case study cover — the cover image wipes up as you reach it
Circle hero — a full-width photo expands from a circle
Reveal grid — three tiles wiping in from different edges
Fixed reading bar — 1px bar pinned to viewport top tracks window scroll