shadcnblocks

A blog section with centered heading and description, then wide stacked rows pairing uppercase tag lines and copy with a bordered image, each with read-more links.

A capped-width reading column with a fixed top progress indicator tied to scroll position, category label, and compact prose sections.

A two-column blog hero pairing a full-height image panel with title, author row, separator, and a bordered pull-quote figure without motion effects.

A centered title band above a capped prose column where the first paragraph opens with a large decorative initial letter and short section headings.

A wide article column beside a sticky aside listing categorized related reading links with hover states and external arrow icons.

A single-post layout with centered title, subtitle, author row with avatar and site link, hero media, and prose body including headings, alert, table, and figures.

A two-column blog article with a sticky narrow column for back navigation, display title, and avatar byline beside a main column with hero image and full prose.

A long-form article block with a centered masthead, main column with prose sections, alerts and tables, sticky in-page navigation, and a bordered call-to-action aside on large screens.

A blog article with breadcrumbs, intro blurb, sectioned prose with alerts and tables, sticky section list, circular social share buttons, and a back-to-top control.

A blog post layout with breadcrumbs, oversized headline, hero image, sectioned body with alerts and tables, and a narrow rail for on-page links and share buttons.

A blog article with dotted hero background, centered title and share row, sticky chapter list, long-form prose with images, and repeated author card.

This component displays a blog post layout with animated transitions for various elements such as the title, author information, and descriptions. It features an image, a publication date, content descriptions, and an author's avatar with details, making it suitable for showcasing articles or stories.

A centered article header with hero image, prose body, and a sticky right sidebar listing numbered section links with scroll-aware active states.

A single-column article with read time and date, hero image, prose sections, a labeled share button row, and a bordered author biography card at the bottom.

This component is designed to facilitate user engagement by providing a form for booking a demo, along with showcasing key benefits and a carousel of company logos. It features input fields for user information and preferences, a select dropdown for source discovery, and incorporates motion effects for enhanced visual presentation.

This component is a demonstration booking block that includes a contact form, a section for animated testimonials, and a footer highlighting trusted partners or clients. The contact form allows users to enter personal details and company information, while the testimonials section uses animations to display user feedback from various organizations.

The component combines a demo booking form with testimonial display functionality, aimed at facilitating user interaction through form inputs such as name, email, location, and more. It features customizable properties for headings, descriptions, and testimonials, making it suitable for user feedback and engagement with multiple selection options.

Button with animated border highlight effect.

Classic L-shaped bracket on each corner.

Plus symbol centered in each corner accent.

Small square frame inset in each corner.

Parallel double-line L brackets anchored on the corner, extending outward.

Filled dot centered on the corner with short arms extending outward.

A square-cornered button with L-shaped SVG accents at all four edges, using standard Button variants.

Expanding ripple rings pulsing outward from the border.

Two gradient beams chasing opposite sides.

Color wave rotating through the border gradient.

Full rainbow conic gradient rotating continuously around the button border.

A single bright gradient beam chasing quickly around the border.

Gradient border ring that breathes with a pulsing scale and opacity.

Diagonal light sweep sliding across the border surface.

Gradient dashed stroke marching continuously around the perimeter.

Static muted border at rest; full spin animation activates on hover.

Counter-clockwise rotating gradient border.

Wide comet tail sweeping slowly around the border.

Soft blurred gradient halo breathing around the edge.

TraceButton with full SVG border draw on hover — draw effect.

TraceButton with SVG border that draws then keeps marching on hover — loop effect.

TraceButton with two SVG strokes meeting from opposite corners on hover — dual effect.

TraceButton with dashed SVG border draw on hover — dash effect.

TraceButton with blurred SVG border glow on draw hover — glow effect.

TraceButton with top and right SVG border edges drawing on hover — partial effect.

Breadcrumb with home icon and ellipsis for collapsed items.

Breadcrumb with home icon and dropdown menu.

Breadcrumb with home icon and icons for each item.

Breadcrumb with home icon wrapped in bordered container.

Breadcrumb with home icon and bullet separators.

Breadcrumb with home icon and slash separators.