shadcnblocks

Three Quarters Progress.

Complete Progress.

Success.

Warning.

Danger.

Info.

Gradient.

Extra Small.

Small.

Default.

Large.

Extra Large.

With Percentage.

With Label Above.

With Label Below.

With Count.

Multi-line Label.

Urban photography showcase with a header, category metadata, numbered content sections, a two-column image grid, and a horizontally scrolling image marquee.

Two-column project introduction featuring multi-line headings with a clip-path mask reveal, metadata labels, and a large bordered hero image.

Viewport-height parallax hero with gradient overlay, a project overview grid, vertically stacked full-width images, and a two-column concept narrative.

Scroll-driven parallax hero with an overlay title, project metadata grid, a four-image gallery with hover zoom, and a two-column concept narrative.

Centered uppercase title with staggered two-column image grids, category metadata, a body paragraph, and a full-width hero image, all in grayscale.

Single-project layout with a header, hero image, descriptive paragraphs, metadata rows, and a two-column image grid with fade-up scroll animations.

Center-aligned project page with a label, large serif title, horizontal divider, three-column metadata, a captioned image, and a description section with a button.

Twelve-column layout pairing a monospace title with a border-left metadata sidebar, a captioned 3:2 image, and a split description section with a button.

Project page featuring dot-prefixed labels, three-column metadata with top borders, a 16:9 image, and a sticky overview heading alongside a description and button.

Twelve-column layout with a serif title, a muted metadata card, a rounded image with a floating caption overlay, and a split description section with a button.

Single-project page with a large serif title, three-column metadata row, a full-width image, and a description section ending with a shadcn/ui Button.

Four-column layout with a sticky sidebar containing project info, metadata, and anchor links alongside a scrolling prose content area with images and captions.

Center-aligned case study with a header, metadata row, and alternating prose sections and full-width images covering challenge, process, and outcome.

Full-screen hero with white text overlay, an article-style body with prose sections, a blockquote, figure captions, and a three-column results metrics grid.

Single-column case study layout with a header, metadata, prose sections covering challenge, process, and outcome, and full-bleed breakout images with captions.

Three-column header with a horizontal accent line, title, description, and metadata alongside a hero image, a creative process section with paired square images.

Two-column layout with accent lines, a wide hero image, paired square images, a concept narrative, a materials list, and a dimensions table.

Three-column header with a title, description, and a muted metadata card, followed by a 3:1 image split and a two-column artistic vision section.

Narrow single-column exhibition layout with a title, description, stacked images, a four-column metadata row, a vision section, and a full-width button.

Center-aligned exhibition page with a title, button, metadata line, a multi-column image grid with hover reveal overlays, a vision section, and a three-column stats row.

Art exhibition layout with a title, description, bordered metadata rows, a hero image, a two-column image grid, and a two-column artistic vision section.

Rounded card header with a two-column description and metadata grid, three stacked full-width images, and a muted footer card with a booking button.

Five-column header with a two-tone title and sidebar portrait, a 2:1 image grid with border-left metadata, a vision section, and a visit scheduling button.

Single-column photography gallery with a title, badges, stacked portrait images, an about section, and compact project rows with thumbnail images and badges.

Two-column layout with a sticky title, badges, and description alongside scrollable portrait images, followed by a three-column grid of overlay project cards.

Multi-section architecture project page with a full-height hero overlay, prose sections, a shadcn/ui Carousel, a panoramic image, and a four-image grid.

Centered title and subtitle above a full-bleed 16:9 hero image, followed by a two-column section with narrative text and a team credits list.

Centered title and subtitle above a two-column layout pairing a 4:5 portrait image on the left with narrative text and credits on the right.

Narrow-width fashion project layout with a centered title, a 3:2 image, a bordered metadata header, and a two-column section for narrative and credits.

Centered title with a wide 2:1 image, a four-column layout with metadata sidebar and narrative text, and a bordered credits section in a multi-column grid.

Full-screen background image hero with animated white text, followed by a white-background content section with a two-column narrative and credits layout.