Release notes

Two new blocks and one overdue fix.

New:

• Hero 10: a bordered hero card over a blurred full-bleed image. A badge, a large centered headline, sub-copy, and two CTAs that rise into place on load. Stilled under reduced motion.
• Footer 6: a two-part footer. On top, a bordered CTA panel over the same image rotated 180 degrees, with a headline and a wide sign-up button. Below it, a brand block with social icons, two link columns, and a hairline copyright row.

Fixed:

• Login 3 no longer flickers. The animated paths in the sidebar were animating their length and their offset at the same time, on an infinite repeat with a negative start delay. The negative delay only applies to the first pass, so every path snapped back to its starting position at the end of its first cycle. The paths now use a single one-way length target, which is what the effect was always meant to be.
• Login 3 works in the light theme. A decorative glow layer behind the form was positioned with a negative z-index inside a container that was not its own stacking context, which pushed the sign-in heading, the button, and the back-to-home link out of view. The layer now sits behind the form the ordinary way.

The registry now speaks to both of the bases people build on. Pick yours once and every preview, source tab and install command follows.

Site:

• Base UI: every component, block and template ships in two trees, Radix UI at /r/<name>.json and Base UI at /r/base/<name>.json. Same API, same markup, primitives swapped underneath.
• Customizer: the theme sheet is now a Customizer. Pick the base and icon library your project uses to get the matching setup, then re-skin every preview with a base color, theme, chart color, font and radius, site-wide or previews only. It replaces the theme playground page.
• Dawn gold: the primary color is a warm gold now, luminous in dark and amber in light, so buttons, rings and the first chart series stand out instead of reading as plain black and white.
• Placeholder images and videos are served from hirael.com instead of third-party hosts, so previews and installed items stop depending on links that can expire.

A family of sections that share one look: a pill badge, a word-by-word headline, cards on a soft glow, and motion that stays out of the way and respects reduced-motion. Drop several on one page and they read as a set.

• Footer 4: light-ray beams behind a brand, contact, location and subscribe layout with a rotating placeholder in the email field.
• Header 2: floating pill nav that shrinks and blurs after you scroll, with a sliding hover highlight and an animated mobile menu.
• Contact 3: a glow panel whose gradient grows as it scrolls in, with email and call actions side by side.
• FAQ 6: multi-open accordion where each question is its own card that rises into view.
• Feature 4, 5, 6: icon service cards on pulsing glows, a two-column values grid on a dotted glow canvas, and a two-card about section on a grid pattern.
• Team 2: a metric strip, a profile card, and three marquee rows of competencies.
• Testimonial 4: quote cards with an orbiting glow ring.
• Coming Soon 2 and Maintenance 2: full-viewport pages with a sparkles horizon and a sparkles backdrop.

A second set for a developer-tool landing page, drawn on hairline rails and crosshair marks:

• Hero 9: a full-viewport card that zooms out as you scroll, with an inline nav, a sparkle backdrop and a carved stat corner.
• Feature 7, 8, 9: orb-icon problem cards, a pointer-spotlight feature grid, and a step-catalog bento with crosshair frames.
• Pricing 4: three tiers with a glowing featured plan and quota checklists.
• FAQ 7: a split layout with a single-open accordion.
• CTA 7: a closing panel inside a scroll-reactive rim glow.
• Footer 5: an inset card footer with three link columns.
• Status 1: a service status page with a 90-day uptime grid, day-by-day tooltips and an incident timeline.

New components:

• Sparkles: a canvas particle field with drift and twinkle. No dependency, pauses offscreen, renders one still frame under reduced-motion.
• Icon Stack: overlapping icon tiles that fan out on hover, for showing a toolchain or an integration set in a single row.

Two new templates, and the first that ship bilingual. Both open in whatever direction the surrounding page reads, then follow an in-page switcher, with Cairo leading for Arabic so right-to-left copy is set in its own typeface:

• Aurael: a landing page for a home-solar brand, built around a day and night control in the hero. Picking a scene cross-fades the photograph and swaps the palette for the whole page, so both are real themes rather than a filter. Below it, hairline-ruled bands with a sticky meta rail carry how it works, cases, about, careers, resources and customers.
• Novael: a landing page for a technology services firm. A fixed scroll-spy navbar over a headline that runs onto a photographic band, an overlapping intro card and count-up stats, a marquee of past employers, a teal service slab, a project grid whose captions expand on hover, and a contact section that doubles as the footer.

Fixes:

• Login 3: the floating background paths start staggered and loop cleanly now, instead of drifting offscreen together and blanking the panel.
• The Hirael mark reads monochrome everywhere it appears in a block. The tiles behind it in App Shell 1, 4 and 5 and in Hero 9 were tinted with the accent color; they are black on white or white on black now.

The catalog is at 75 components, 119 blocks and 11 templates.

The biggest release so far. Marketing pages were well covered; the screens behind the login weren't, and much of the source you copied in was styled by hand where shadcn/ui already had the primitive. Both are fixed. The catalog now ships 70+ components and 95+ blocks.

New components

• Kanban: columns of cards you can drag across, with pointer and keyboard moves, a drop placeholder, empty-column hints, live announcements, and no dnd-kit.
• Sparkline: tiny inline SVG line, area, and bar charts with an optional curve, last-point dot, reference line, and hover tooltip. Tints with currentColor, no chart library.
• JSON Viewer: collapsible tree with typed value colors, item counts on closed nodes, long-string truncation, expand or collapse all, copy, and arrow-key navigation.
• Diff Viewer: unified or split line diffs computed in-component with an LCS algorithm, +N / -N stats, and expandable context gaps. No dependencies.
• Cron Editor: visual field builder and raw expression kept in sync, with presets, per-field modes, a plain-English preview, and the next three run times.
• Country Select: searchable flag picker with pinned countries, optional dial codes, and single or multiple selection. Search by name or ISO code.
• Credit Card Input: number, expiry, and CVC with brand detection, Luhn and expiry validation, per-brand formatting, and auto-advance between fields.
• Emoji Picker: 560+ emoji in eight categories, keyword search, recents, skin tones, and a keyboard grid. Self-contained, no dependencies.
• Avatar Upload: pick, drop, crop, and zoom a profile image with a circle or square mask, initials fallback, and size or type limits.

New blocks

Four new block categories: AI, Team, Stats, and Changelog.

• SaaS: Settings 1 (sticky section nav, label/control rows, dirty-aware Save/Cancel, danger zone confirm), Settings 2 (password strength meter, 2FA toggle, active sessions, notification switches with Pause all), Members 1 (live search, inline roles, pending invites with resend/revoke, invite dialog with email tags), and Onboarding 1 (a four-step setup wizard on the stepper with gated Continue).
• Auth: Two-Factor Setup 1, a three-step scan, verify, and recovery-codes flow built on the QR code and OTP input.
• AI: Prompt Input (auto-growing composer with attachments, model picker, and Stop), Message Thread (streaming bubbles, tool calls, reasoning, sources, and a streaming cursor), and AI Chat 1 (history sidebar, model badge, streaming thread, pinned composer).
• Status Pages (renamed from Not Found): Coming Soon 1 (countdown and notify form), Maintenance 1 (window, progress, and update log), and Error 1 (500 with collapsible technical details), alongside the existing 404 block.
• Team: Team 1, a bordered member grid with initials placeholders, roles, bios, and a hiring footer.
• Stats: Stats 1, a metrics band with count-up numbers, optional deltas, and a two-column header on large screens.
• Changelog: Changelog 1, a release-notes page with a sticky date rail, version badges, New / Improved / Fixed tags, and a tag filter.
• Cloud: Env Editor, a variables table with masked secrets, per-environment chips, .env import, key validation, and unsaved-change tracking.
• Widgets: Cookie Consent, a banner with per-category switches that remembers the choice in localStorage.

Browse blocks in place

Block category pages no longer stop at thumbnails. Every block in a category renders live at full size, stacked, each with its viewport and RTL controls, a one-line install command with a package-manager picker, and links to the source. A sticky chip row tracks where you are, so an eleven-block category is one click to any block.

Rebuilt on shadcn/ui

This is why the major version bump. The source that lands in your repo changed shape in ways you'll notice when you read or edit it:

• shadcn primitives across the catalog. Hand-rolled buttons, badges, labels, textareas, and search boxes across components, blocks, and templates are now Button, Badge, Label, Textarea, InputGroup, and ToggleGroup where shadcn/ui already had the primitive. Template kits (agency-landing, rivr, usd-halo, nexacore) keep their look but their button primitives wrap Button. The CLI installs the extra dependencies for you; expect button, badge, field, input-group, or toggle-group to be added to your components/ui when you add or update an item.
• Forms on Field. Form-heavy blocks and demos (auth, contact, newsletter, settings, members, onboarding, cookie consent, and the examples) use FieldGroup, Field, FieldLabel, FieldDescription, and FieldError, with data-invalid and aria-describedby wired. Errors and helper text look and behave the same in every block.
• One source style. Components are named arrow-function exports, props are <Name>Props interfaces, variants are class-variance-authority, and prop types that used to override native attributes by accident (title, name, id, onError, onCopy) now say so with Omit. Compound parts, data-slot attributes, and prop names are unchanged, so existing usage keeps working.
• Copy Button is now a real Button: size="sm" for labelled, icon-xs and icon-sm for icon-only, variant passes through.

Fixes

• Emoji Picker no longer resizes as you hover different emoji names.
• Page-scale blocks (AI Chat, Settings, Members, Onboarding, status pages) fill the viewport instead of collapsing in the preview.

This release is about the site itself. No new components, but every page you use to find one got easier.

Highlights:

• Live previews everywhere: the home page, the component index, and each category page now render the real component, not a description card. Try a combobox or a date range picker before you install it.
• Usage on every detail page: a ready-to-paste import statement that matches where the file lands in your repo, right under the install command. Long component source starts collapsed; expand it when you need it.
• Source and feedback links: each component, block, and template links to its source on GitHub and to a pre-filled issue.
• Sidebar that follows you: block pages list block categories, template pages list templates, and the changelog lists releases. The item you are on is always highlighted and scrolled into view.
• Blocks in three groups: Marketing, Site pages, and Product & app, so 25 categories read as a map instead of a wall.
• Search on phones, and search that matches what a component does, not only its name. Try "upload" or "dropdown".
• Smaller polish: headlines scale down on small screens, preview cards show a placeholder while they load, block and template cards show file counts, and the changelog now lives inside the catalog with the rest of the site.

Hirael is now public: a shadcn-compatible registry of the inputs and section blocks most products end up building anyway. Install any item with npx shadcn add https://hirael.com/r/<name>.json and the source lands in your repo, with no runtime package to depend on.

Highlights:

• Components: the input and data controls shadcn/ui leaves out: multi-select, tag input, combobox, currency and phone inputs, rich text and YAML editors, color and date pickers, data tables, and more.
• Blocks: section blocks across heroes, pricing, features, testimonials, dashboards, auth, and cloud/SaaS consoles.
• Templates: full-page layouts composed from the components and blocks.
• RTL and theming: every item works right-to-left with no config, and the live theme editor re-tints the whole catalog.