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.