shadcnblocks

A two-column rate card with a monthly price, booking conditions, and a five-step process list covering revision, strategy, implementation, testing, and review.

A pair of pricing cards for a monthly retainer and a premium package, each with a description, included-benefits list, price, and a get-started button.

Star rating display for a numeric score.

Star rating paired with descriptive label text.

Rating prefilled with defaultValue of three stars.

A five-star score with full, half, and empty icons plus optional numeric label and caption.

Rating with three stars selected for a mid-range score.

Star rating composed with a field label so users know they are scoring a specific product.

Controlled five-star rating bound to a value, with helper text showing the currently selected star count.

Five-star rating prefilled with a default value of three so a mid-range score shows on load.

Non-interactive four-star rating that displays a fixed score without accepting pointer or keyboard input.

Five-star rating that uses a larger button size and starts with four stars selected.

Interactive five-star rating with clickable buttons that starts empty so users can pick a score.

Non-interactive rating for displaying an average score.

Rating with increased star icon size.

Five-star rating with clickable buttons.

Rating shows stars plus explicit numeric score.

Reel with play, mute, previous, and next control buttons.

Timed image reel without video items.

Reel with header overlay title and description on each item.

Vertical reel with image and video items, progress, and navigation.

Composed world clock with labels, dates, and times.

RelativeTime with custom date and time format options.

RelativeTime rows with custom RelativeTimeZoneLabel text.

RelativeTime showing one UTC clock row.

RelativeTime with NYC, London, and Tokyo zones.

Full-screen new-password form with two fields, a submit button, and a return-to-login link.

Two-column reset screen with password fields on the left and a full-height photograph on the right.

Centered reset screen with a large heading and stacked password fields without a card.

Muted-panel reset form with two password fields and a checklist of password requirements.

Two-column reset card pairing password fields with a dedicated requirements panel.

Collapsible panel with a button to collapse and expand the sidebar.

Basic horizontal ResizablePanelGroup with two equal panels.

Sidebar, editor, and terminal split using nested panel groups.

ResizablePanel with minSize and maxSize percentage constraints.

Nested horizontal and vertical ResizablePanelGroup composition.

Three-panel horizontal layout with two ResizableHandle separators.

Vertical ResizablePanelGroup with header and content panels.

Resizable file list and preview panes each using ScrollArea.

ResizableHandle with the withHandle prop for a visible drag grip.

A two-column resource page with a prose article on the right and a sidebar containing download options, whitepaper info, and social sharing links.

An article layout with back navigation, author avatar and byline, rich blog content, social sharing buttons, and a companion illustration.

A two-column document page featuring breadcrumb navigation, a prose article with a hero image, and a sticky sidebar with download button, reviewer info, feature list, and social share icons.

A full resources page with a hero section containing breadcrumb, headline, email form, and featured card, plus a filterable grid of resource cards with load-more pagination.

A resources section with a large featured article grid, two secondary article cards, and a tabbed list of updates filterable by category.

A resources section with a large featured post card containing an image and CTA button, followed by a list of articles showing date, category, and title in columns.

A news and resources list with a left label column and rows displaying linked titles, categories, author avatars, and dates with animated hover effects.

A stacked course list where each entry shows a badge, title, lesson and video counts, duration, audience, author avatar, image, and a start button.