Build with Craftled UI

One featured image, seven shader effects — dithering, halftone, fluted glass, color panels, and gradients. Pick an effect in the panel; install any one via the shadcn CLI.

Zero-dep decorative section backgrounds — seven SVG/CSS variants (dots, grid, vertical-lines, diagonal-lines, vertical-lines-top, vertical-lines-dome, isometric). Theme-aware via currentColor; position with absolute inset-0 on a relative parent.

A gradient-filled area chart built on shadcn's chart primitive. Pass time-series data, get a polished result.

Ambient time-series chart — each data point is a colored dot with a translucent vertical stem dropping to the baseline. Built on shadcn's chart primitive + Recharts (BarChart with a custom shape). Color flows through ChartConfig; gradient background, aspect ratio, dot radius, and stem opacity/width all customizable.

Horizontal ranked bar chart with title, subtitle, and source — built on shadcn's chart primitive + Recharts (BarChart layout="vertical"). Supports currency/number/percent formatting, sort order, and value labels.

A two-pane finance card: stacked bar chart on the left, KPI rail with icon tiles and a CTA on the right.

Balance card with a sparkline trend and an accounts list. Each account shows a percent-change pill (green up / red down) and the current amount.

Editable LinkedIn-style comparison slide with a stop-doing-this / start-doing-this rhythm. Pass sections, get colored prompt rows.

Dark CTA card with a checked bullet list and a full-width gradient action button. Drop in a title, bullets, and label.

Newsletter signup with a headline, email input + subscribe button, and a decorative slot on the right. Form supports onSubmit handler or native action URL.

Dark CTA with an eyebrow tag, headline, description, inline email form, and a decoration slot for the book/report mockup. Accent prop picks the tag + button color from a palette.

Dark CTA with isometric 3D stack of app icons. Each layer is { bg, content } so logos can be swapped per stack. Uses CSS perspective + rotateX/Z for the iso tilt — no library needed.

Promo card for a webinar, summit, podcast, or any event. Brand + event-type pills, a headline, and N participant photos. Pattern overlay is a slot — pass any SVG/React node; bg color is a className.

Dashed circle with N app icons orbiting around a centered headline. Icons auto-distribute (override each angle if needed). All slots are ReactNode; uses shadcn theme tokens so light + dark auto-adapt.

Centered logo on a mesh gradient background, wrapped in a translucent glassy halo (backdrop-blur + ring). Composes the Mesh Gradient Card as the background — all mesh props pass through; logo is any ReactNode (img, svg, monogram).

Social / OG promo frame (1400×735 design canvas, scales to 1200×630). Mesh-gradient, image, or solid background; three coordinate-positioned product screenshots; a glass center card with a cyan→violet gradient stroke; and a bottom fade. Pass `editable` with `onImagePan` / `onImageDrop` to drop an image straight onto a frame and drag to pan it within (frames stay fixed; each screenshot carries a pan/zoom `transform`). All content is prop-driven, so the demo doubles as an OG-image generator — drop a screenshot onto any frame (or via the sidebar), drag to position it, zoom, tune the gradient and frames, then Copy JSON or export PNG/JPG at OG size. Browser/React only, no next/og ImageResponse.

Parametric 3D book — a single tilted hardcover, a stacked group, or a horizontal shelf, all from one BookCover atom. Pure CSS 3D (perspective + rotateX/Y/Z, no library): typographic OR image cover, page-block fore-edge, spine, solid + wireframe variants. Optional grab-to-orbit drag (mouse/touch) with an onRotateChange callback. Wireframe edges/faces and the scene background default to shadcn theme tokens, so it adapts to light/dark. Geometry and colors are all props, so the demo doubles as a cover generator with Copy JSON + Export JPG.

Customer-story card (Stripe Customers style): brand-tinted image, customer logo, headline, and a Read story CTA. brandColor drives the duotone tint and bottom gradient; subtle hover animations on image zoom and CTA arrow.

Portrait-aspect testimonial card with a poster image, brand chip, play button, pull-quote, author, and client logo. All logos are React slots.