A library of production-ready React blocks built with Tailwind CSS and shadcn/ui. Copy, paste, and customize for your next project.
showcase28
Browser-chrome card rendering a markdown source editor on the left and the rendered HTML on the right — minimal monochrome syntax markers, structured preview blocks (headings, paragraphs, lists, fenced code). Every label is editable; no media props required.
showcase29
Browser-chrome card rendering an AI prompt and a structured response — markdown blocks (headings, paragraphs, lists, quotes, code), citation list, copy/regenerate/apply footer. Every label is editable; no media props required.
showcase30
Browser-chrome card rendering a live spreadsheet — formula bar with cell reference, typed columns, status-toned cells, and a selected total cell with outline ring. Every label is editable; no media props required.
showcase31
Browser-chrome card pairing two minimal code panes — TypeScript type definitions on the left, real call-site usage on the right. Monochrome syntax with muted comments. Every label is editable; no media props required.
showcase32
Browser-chrome card pairing two minimal code panes — GraphQL query on the left, mirrored JSON response on the right. Monochrome syntax with muted comments and a timing footer. Every label is editable; no media props required.
showcase33
Browser-chrome card hosting a regex playground — pattern + active flag pills up top, test rows with inline match highlights and capture column, summary footer. Every label is editable; no media props required.
showcase34
Browser-chrome card pairing two minimal code panes — same logic in two languages (TypeScript and Python by default). Monochrome syntax with muted comments and language badges. Every label is editable; no media props required.
showcase35
Browser-chrome card pairing a before/after code migration — eyebrow + title + description above each pane, monochrome syntax, and an apply-migration footer with diff summary. Every label is editable; no media props required.
showcase37
Horizontally scrollable row of wide product showcase frames with captions.
showcase41
A ruled, type-forward project index where each row reveals a floating thumbnail on hover.
showcase42
An asymmetric mosaic image gallery with mixed-span tiles and monospace frame captions.
showcase43
A single featured project with a tall image and a meta column of client/role/year rows, a paragraph, and a CTA.
showcase44
Centered eyebrow, heading, and description above a grid of borderless brand cards — each with a square, colorable logo plate, a title and short description, and a full-width animated seal detail button.
showcase45
A showcase of alternating split rows, each pairing an image tile that floats a live product micro-asset with a monospace eyebrow, a light heading, a paragraph, and a checked bullet list.
showcase46
A tabbed showcase with an eyebrow over a hairline rule and a two-column heading, where each tab reveals a light title, checked bullets, and an image tile floating a live product micro-asset.
showcase47
A split showcase pairing copy, checked bullets, and an accent button with a gradient canvas where two live micro-assets float at staggered depths for a layered product scene.
showcase48
A horizontal pipeline with an eyebrow over a hairline rule and a two-column heading, where three image tiles float live micro-assets as connected stages joined by directional arrows.
showcase49
A centered showcase with an eyebrow, light heading, and paragraph over a wide image tile that floats a live quick-actions bar, followed by a four-up grid of icon-led action descriptions.