v0.3.4 — titleColor across 7 shader/gradient blocks

Adds an optional titleColor prop to every shader/gradient featured block in the family.

Updated blocks

• featured-mesh-gradient
• featured-halftone
• featured-halftone-dots
• featured-dithering
• featured-fluted-glass
• featured-grain-gradient
• featured-color-panels

New prop (backward compatible)

<FeaturedHalftone
  image="..."
  title="Your headline"
  titlePosition="center"
  titleSize={48}
  titleColor="#ff6b35"   // NEW — any hex; omit to keep block default
/>

• titleColor — optional hex string applied as inline
  style={{ color }} on both the eyebrow and the title. Inline style
  wins over titleClassName color via CSS specificity, so you can
  override the block's stock color without clearing any utilities.
• Omit the prop to keep the block's default text color (e.g.
  text-stone-900 on featured-halftone, text-white on
  featured-dithering).

Demo controls

Each demo's right rail Text section now has a swatch-style Color
field directly under the size slider. Randomize cycles every visual
parameter but preserves your chosen text + color, so iterating on
type treatments doesn't get reset by chance.

Install or update

bunx shadcn@latest add https://ui.craftled.com/r/featured-mesh-gradient.json

(Replace featured-mesh-gradient with any of the seven blocks above.)

— Full diff · CHANGELOG

v0.3.3 — Text controls across all 6 shader/gradient blocks

Brings the v0.3.2 mesh-gradient text props to the rest of the family.

Updated blocks

• featured-halftone
• featured-halftone-dots
• featured-dithering
• featured-fluted-glass
• featured-grain-gradient
• featured-color-panels

(featured-mesh-gradient already had this in v0.3.2.)

New props (identical across all six, backward compatible)

```tsx
<FeaturedHalftone
image="..."
title="Your headline"
titlePosition="center" // NEW — 9 grid positions
titleSize={48} // NEW — px number
/>
```

• titlePosition — 9 values: top-left / top-center / top-right / center-left / center / center-right / bottom-left / bottom-center / bottom-right. Defaults to bottom-left so existing usage is unchanged.
• titleSize — title font size in px. The eyebrow scales as max(11, titleSize * 0.4). Defaults to 30.

Each demo's right rail now has a Text section

• Live text input (typing updates the card immediately)
• 3×3 position picker (square buttons, active = filled dot)
• Size slider 12–80px

Randomize cycles position + size while preserving your typed text.

What changed internally

The figcaption in each block moved from hard-pinned absolute (right-4 bottom-4 left-4) to a full-bleed flex container driven by a local POSITION_CLASSES map. Each block has its own copy of the map — registry items must remain self-contained for shadcn CLI installation.

Install or update

```bash
bunx shadcn@latest add https://ui.craftled.com/r/featured-halftone.json
bunx shadcn@latest add https://ui.craftled.com/r/featured-halftone-dots.json
bunx shadcn@latest add https://ui.craftled.com/r/featured-dithering.json
bunx shadcn@latest add https://ui.craftled.com/r/featured-fluted-glass.json
bunx shadcn@latest add https://ui.craftled.com/r/featured-grain-gradient.json
bunx shadcn@latest add https://ui.craftled.com/r/featured-color-panels.json
```

Full changelog

v0.3.2...v0.3.3

v0.3.2 — Mesh Gradient Card text controls

Adds editable text controls to the featured-mesh-gradient block.

New props

```tsx
<FeaturedMeshGradient
title="Your headline"
titlePosition="center" // NEW
titleSize={48} // NEW
colors={...}
// ... existing props unchanged
/>
```

• titlePosition — 9 values: top-left / top-center / top-right / center-left / center / center-right / bottom-left / bottom-center / bottom-right. Defaults to bottom-left so existing usage is unchanged.
• titleSize — title font size in px. The eyebrow scales proportionally (max(11, titleSize * 0.4)). Defaults to 30.

Internally the figcaption switched from absolute positioning (was hard-pinned to bottom-left via right-4 bottom-4 left-4) to a full-bleed flex container that respects the new alignment prop.

Demo right rail

A new Text section in the controls panel:

• Text input bound to title (live update)
• 3×3 position picker (dot grid, active position filled)
• Size slider 12–80px

Each preset (Default / 1960s / Sunset / Sea) ships its own coordinated text + position + size to demonstrate the range. Randomize cycles position + size while keeping the user's typed text.

Backward compatible

Existing installs of v0.3.x are unaffected — both new props default to the previous behavior.

Full changelog

v0.3.1...v0.3.2

v0.3.1 — Navbar frosted-glass + iframe duplicate-navbar fixes

Patch release fixing two bugs surfaced via /qa on v0.3.0.

Fixed

Navbar frosted-glass effect now actually works

The v0.3.0 sticky-positioning refactor moved styling from an absolute inner div to the <header> element, but kept the in-data-scrolled: Tailwind variant. That variant means "an ancestor has data-scrolled", but data-scrolled was now on the <header> itself — so the styles never matched. Result: navbar was fully transparent at all scroll positions, content showed through unobscured, nav links overlapped with content.

Fix: in-data-scrolled: → data-[scrolled=true]: (variant for "element itself has the attr"). Also tightened the visual:

• Always-on baseline bg-background/80 + backdrop-blur so the navbar reads as a surface even before scroll.
• Scrolled state bumps to bg-background/85 + backdrop-blur-md + shadow-sm.

If you installed the v0.3.0 navbar, reinstall to get the fix:

```bash
bunx shadcn@latest add https://ui.craftled.com/r/navbar.json
```

/raw/[name] no longer inherits the docs SiteHeader

Iframe-target previews were showing TWO stacked navbars: the docs site's SiteHeader (Craftled UI brand) AND the demo navbar (Craftled gradient). Root cause: app/raw/layout.tsx was a nested layout under the root, so SiteHeader inherited.

Fix: Next.js route group refactor.

• app/(docs)/layout.tsx — root layout for the docs site (SiteHeader + theme + fonts).
• app/(raw)/layout.tsx — independent root layout for iframe targets (theme + fonts, NO header).

URL paths unchanged ((docs) and (raw) don't appear in URLs). Switching between groups full-page-reloads, which is fine because /raw is only navigated to via iframe src or new-tab links.

Not Fixed (Deferred)

• Paper Shaders WebGL errors in headless browsers. @paper-design/shaders-react throws unhandled rejections when WebGL isn't available. Pre-existing since v0.1.0, affects automated testing and the ~1% of users with WebGL disabled. Tracked for a future release with proper <ShaderErrorBoundary> + static fallback.

Verification

QA report covers 12 verified surfaces: home, /preview/button, /preview/navbar, /raw/navbar, /compose, dialog interactions, dark mode, mobile viewport, sidebar nav, theme toggle, Preview/Code tabs, frosted-glass scroll behavior.

Full changelog

v0.3.0...v0.3.1

v0.3.0 — Navbar + Preview/Code tabs + Full-bleed previews

Three threads in one release: a new navbar block (with its two supporting primitives), a shadcn-parity preview surface, and an internal dogfooding pass.

🌐 Live: ui.craftled.com · /compose

New primitives (2)

• accordion — single or multi-open accordion on @radix-ui/react-accordion. Pairs with tw-animate-css's accordion-down/up keyframes for smooth height transitions.
• navigation-menu — top-bar menu with rich dropdowns on @radix-ui/react-navigation-menu. Root + List + Item + Trigger + Content + Link + Viewport + Indicator + a shared navigationMenuTriggerStyle for flat top-level links.

New block (1)

• navbar — sticky top navigation ported from the long-running epigraphmedia.com navbar. Brand mark + center NavigationMenu (flat links OR rich icon/description rows) + CTA buttons + scroll-aware backdrop blur. Mobile menu uses Accordion. position prop ("fixed" | "absolute" | "sticky" | "static") so it works as a real page header or showcased inside a card.

```bash
bunx shadcn@latest add https://ui.craftled.com/r/navbar.json
bunx shadcn@latest add https://ui.craftled.com/r/navigation-menu.json
bunx shadcn@latest add https://ui.craftled.com/r/accordion.json
```

Preview surface — shadcn parity

The preview pages got a real architecture refactor instead of one-off CSS hacks.

• Per-item layout strategy. Registry items can declare "layout": "fullwidth". Full-width items render in a full-bleed iframe instead of the 700px docs column. Default stays "contained" so primitives are unchanged.
• Viewport toggle — Mobile 375 / Tablet 768 / Laptop 1024 / Desktop full chips at the top of each full-bleed preview. The iframe creates a real viewport at the chosen width so lg: / max-lg: media queries fire correctly.
• /raw/[name] route — bare demo render with no docs chrome. Used as the iframe source AND as the "Open standalone ↗" target.
• Preview / Code tabs above every preview. The Code tab shows the exact TSX bunx shadcn@latest add would land in your repo, syntax-highlighted via shiki with dual github-light/github-dark themes baked in. Copy-to-clipboard button per file. Per-file sub-tabs when a block has multiple files.

Internal dogfooding

• SiteHeader now uses the Navbar block. Visitors see the same component on every page that they'd install. One source of truth, no duplicate implementations.
• Sidebar restyled to match the epigraphmedia blog table-of-contents — 13px font, muted-foreground group titles, tighter spacing, no hover background. Reads as docs nav, not a marketing widget.
• Navbar position="sticky" bug fix. Original block used an absolute inner div designed for fixed only, leaving the outer <header> with zero intrinsic height. Refactored so both fixed and sticky displace content correctly. If you installed v0.2.0 navbar... reinstall to pick up the fix.
• app/layout.tsx simplified. Docs chrome (sidebar + 700px column) extracted into a new <DocsShell> component so full-width pages can opt out.

Stats

	v0.1.0	v0.2.0	v0.3.0
Primitives	7	11	13
Blocks	22	22	23
Total registry items	29	33	36
Pages	2	3	4 (+ /raw)

Full changelog

v0.2.0...v0.3.0

v0.2.0 — Dialog + Dropdown + Tabs + Tooltip + Compose

The follow-up to v0.1.0. Four new primitives that unblock real app composition + a /compose showcase page demonstrating how they fit together.

🌐 Live: ui.craftled.com/compose

New primitives (4)

• dialog — Modal dialog built on @radix-ui/react-dialog. Includes overlay, content, header, footer, title, description, and an opt-out close button.
• dropdown-menu — Full surface: items, checkbox items, radio groups, labels, separators, shortcuts, nested sub-menus, and a destructive item variant.
• tabs — Pill-style tab switcher with active lift + shadow treatment.
• tooltip — Built on @radix-ui/react-tooltip with TooltipProvider baked in so you can wrap once and use anywhere.

```bash
bunx shadcn@latest add https://ui.craftled.com/r/dialog.json
bunx shadcn@latest add https://ui.craftled.com/r/dropdown-menu.json
bunx shadcn@latest add https://ui.craftled.com/r/tabs.json
bunx shadcn@latest add https://ui.craftled.com/r/tooltip.json
```

New: /compose showcase page

Visit ui.craftled.com/compose to see three real-world compositions exercising every primitive together:

1. Settings panel — Dialog + Tabs + Input + Label + Button + Separator + Tooltip
2. App shell — Input search + editor toolbar with Tooltips + Dropdown user menu + Skeleton loading states
3. Mini dashboard — Card + Chart (area-gradient block) + Tabs (date range) + Dropdown (row actions)

Each composition is a drop-in pattern you can lift verbatim or remix.

Stats

	v0.1.0	v0.2.0
Primitives	7	11
Blocks	22	22
Pages	2 (home + preview)	3 (+ compose)
Total registry items	29	33

Full changelog

v0.1.0...v0.2.0

v0.1.0 — initial public release

First public release of Craftled UI — a craft-led, shadcn-native component library.

🌐 Live: ui.craftled.com

What's inside

• 7 primitives — button, card, chart, input, label, separator, skeleton
• 22 blocks across 5 groups:
  • 2 charts (chart-area-gradient, chart-stems)
  • 2 dashboards (dashboard-finance, dashboard-net-worth)
  • 4 CTAs (cta-gradient, cta-newsletter, cta-ebook, cta-app-stack)
  • 8 shader-powered featured blocks (featured-halftone, featured-dithering, featured-mesh-gradient, and more)
  • 6 editorial blocks (featured-event, featured-story, testimonial-video, carousel-do-dont, annotated-figure, featured-integrations)

Install

```bash
bunx shadcn@latest add https://ui.craftled.com/r/button.json
bunx shadcn@latest add https://ui.craftled.com/r/dashboard-finance.json
```

Or register the namespace once:

```bash
bunx shadcn@latest registry add @craftled=https://ui.craftled.com/r/{name}.json
bunx shadcn@latest add @craftled/featured-halftone
```

Stack

Next.js 16 · React 19.2 · Tailwind v4 · TypeScript 6 · Bun · shadcn CLI v4 · Biome 2 + Ultracite 7 · paper-design/shaders-react · Recharts 3

What's next

• More primitives (Dialog, Dropdown, Tabs, Tooltip)
• A first-party Pretendard-style typography block
• Storybook-style "compose your own" page

Issues + PRs welcome.