Blocks for shadcn/ui designed to fit together: compose a page, then install it with one command.
Soft rays of light that fan down from the top and sway slowly.
Example usage of Light Rays.
Three dots that pulse in turn, sized like the text around them.
Example usage of Loading Dots.
Hairline grid of customer logos with a short introduction.
A button that leans a few pixels towards the pointer.
Example usage of Magnetic Button.
An infinite scrolling track for logos, testimonials or anything else.
Example usage of Marquee.
Uncovers an image or a card with a mask that slides across it.
Example usage of Mask Reveal.
Sticky navigation bar that turns translucent on scroll, with an accessible mobile menu.
Email signup card with a confirmation state; posts to a configurable endpoint.
Counts up to a number once, when it scrolls into view.
Example usage of Number Ticker.
Items that circle around a center while staying upright.
Example usage of Orbit.
A layer that moves at its own pace while the page scrolls.
Example usage of Parallax.
Personal introduction with availability status, social links and a scrolling list of tools. Made for portfolios.
Accessible feature comparison across three plans, grouped by category, with the featured plan highlighted.
Three-tier pricing with an animated monthly / yearly toggle and a highlighted plan.
Grid of projects with screenshots, summary, year and stack. Draws a placeholder when a project has no image.
A grid floor in perspective that slides toward the horizon.
Example usage of Retro Grid.
Concentric rings that breathe from the center, behind a logo or a button.
A button that sends a soft ripple out from where it is pressed.
Example usage of Ripple Button.
Example usage of Ripple.
Letters start scrambled and settle one after the other.
Example usage of Scramble Text.
A bar that fills as you scroll the page or a panel.
Example usage of Scroll Progress.
Layout primitives shared by every block: Section, Container and SectionHeader.
Example usage of Section.
A single choice between a few options, with a pill that slides to the selected one.
Example usage of Segmented Control.
A level in a few segments, such as the strength of a password.
Example usage of Segment Meter.
Numbered list of services with a starting price, deliverables and a link.
A button with a beam of light travelling around its border.
Example usage of Shimmer Button.
A light sweeps across the text, for work in progress.
Example usage of Shimmer Text.
One all-inclusive plan: what's included on one side, price and call to action on the other.
Brand icons for social links (GitHub, LinkedIn, X, YouTube), which lucide-react no longer ships.
Twelve bars that fade in turn, for waits the size of an icon.
Example usage of Spinner.