Build with Craftled UI

shadcn's Button primitive — variants (default/secondary/outline/ghost/link/destructive) and sizes (sm/default/lg/icon), with Craftled styling: border + ring + drop shadow for default/destructive, elevated shadow + ring on outline.

shadcn's latest Card primitive — Card + CardHeader + CardTitle + CardDescription + CardAction + CardContent + CardFooter. Uses container queries on the header so CardAction auto-positions to the right when present. data-slot=* on every sub-component for downstream styling hooks.

Form input with Craftled treatment: ring-1 ring-foreground/10 + shadow-sm at rest, multi-layer focus ring (border-foreground/35 + ring-ring/25 at 3px), branded selection color, aria-invalid styling.

Accessible form label built on @radix-ui/react-label. Auto-dims when paired with a disabled peer or inside a disabled group.

Horizontal or vertical divider built on @radix-ui/react-separator. Uses data-orientation to switch axis; decorative by default so screen readers skip it.

Loading placeholder. animate-pulse + bg-accent + rounded-md baked in. Compose any shape by sizing it with width/height/rounded utilities.

Modal dialog built on @radix-ui/react-dialog. Includes overlay, content, header, footer, title, description, and an opt-out closable X. data-slot=* hooks on every sub-component for styling integration.

Full dropdown menu surface built on @radix-ui/react-dropdown-menu: items, checkbox items, radio groups, labels, separators, shortcuts, and nested sub-menus. Includes a destructive item variant.

Accessible tabs built on @radix-ui/react-tabs. TabsList wraps TabsTrigger pills; active triggers get a bg-background lift with shadow.

Tooltip built on @radix-ui/react-tooltip. Includes TooltipProvider so you can drop a single root once and use Tooltip + TooltipTrigger + TooltipContent anywhere. Comes with an arrow indicator.

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.

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.

Real CMYK halftone shader (via @paper-design/shaders-react) applied to any image. WebGL renders the printing-press look — channel-by-channel ink colors, dot size/softness, grain overlay, three dot styles (dots/ink/sharp).

Image dithering shader (via @paper-design/shaders-react) — supports random + Bayer 2x2/4x4/8x8 patterns, custom 2-3 color palettes, configurable color steps, and an originalColors mode that samples directly from the image.

Single-color halftone dot shader (via @paper-design/shaders-react) — square or hex grids, four dot styles (classic / gooey / holes / soft), grain controls, and an originalColors mode for sampled palettes.

Fluted glass shader (via @paper-design/shaders-react) — streaked, ribbed distortions over an image with five grid shapes (lines/linesIrregular/wave/zigzag/pattern) and five distortion shapes (prism/lens/contour/cascade/flat). Looks like looking through textured architectural glass.

Generative grain-gradient shader (via @paper-design/shaders-react) — no image input, just colors + shape. Seven shapes (wave/dots/truchet/corners/ripple/blob/sphere), up to 7 colors, animated by default. Great for hero backgrounds and OG images.

Pseudo-3D color panels shader (via @paper-design/shaders-react) — semi-transparent slabs rotating around a central axis. Up to 7 colors, density/angle/length/fade/blur/gradient controls. Generative, animated by default.

Static mesh gradient shader (via @paper-design/shaders-react) — up to 10 color spots blended with two-direction sine wave distortion. Adjustable blend sharpness, grain, and positions seed. Generative, static by default (speed=0).

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).

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.

Wrap any object as children and pin labeled callouts to specific points via { x, y, side } percentages. Dashed stems extend out to the figure edges.

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