Skip to content
38
Changelog

Release notes

Every Hirael release, newest first, with the components and blocks it added and the fixes it shipped.

Updated October 13, 2026

Latest

7.5.0

Auth blocks, previews at real size

New:

  • Login 04. Email first, password second, inside one wide card. A chip shows the email so you can switch accounts, and a hidden username field lets password managers fill the right one.
  • Login 05. GitHub, Google and Apple stacked, then email and passkey. Email sends a magic link.

Improved:

  • Auth blocks use your Card and Alert, with a plain background, a sans heading and no entrance animation.
  • Login 01 puts the forgot-password link beside the password label, adds a passkey option and shows failed attempts in an Alert.
  • Login 02 swaps the grid background and glow for a world map in your theme's colors, and its form leads with Google and GitHub.
  • Sign Up 01 leads with providers, shows a password hint under the strength meter and replaces the terms checkbox with a line of text.
  • Forgot Password 01, OTP Verify 01 and Two-Factor Setup 01 share the same layout, with sentence-case copy and no uppercase labels.
  • Templates follow your theme. Agency Landing, USD Halo, Nexacore, Portfolio and Mindloop drop hard-coded grays and brand colors for your tokens, so they work in dark mode.
  • Magnetic Button takes variant and size, so a link rendered through it can look like any of your buttons.

On the site:

  • Every block page lists its category. A row under the title links to each block in the same category, with the current one marked and a link back to the grid.
  • Previews render at real size. Mobile, tablet and desktop load at 380, 768 and 1280 pixels and scale down to fit, with a zoom menu beside the RTL and theme toggles.

Added

Updated

7.4.0

Filter builder, AI parts and 18 more

New, for scheduling:

  • Date Time Picker. A calendar beside hour and minute columns in one field, with a 12-hour clock option and minute steps.
  • Time Slot Picker for booking a meeting time.

New, for data:

  • Filter Builder. A Linear-style filter bar with option, multi-select, text, number and date filters, plus applyFilters for client-side lists.
  • Virtual List, Description List and Comment Thread.

New category, AI: Reasoning, Tool Call with an approval step, Sources with citation previews, and Model Selector.

Also new: Theme Toggle, Language Switcher, Masked Input, PDF Viewer, Upload Queue, File Card, a mobile Bottom Navigation, Swipe Actions and Pull to Refresh, and three hooks: useMediaQuery, useDebounce and useCopyToClipboard.

Changed:

  • Spinner and Combobox are no longer Hirael items, because shadcn/ui ships both. Blocks and components that use them now install your own copy from shadcn instead of overwriting it.
  • Kbd is now Kbd Button: only the pressable keycap, beside shadcn's own Kbd and KbdGroup. Blocks that show shortcuts use shadcn's Kbd directly.
  • Diff Viewer is removed. Copies you already installed keep working.
  • Floating Toolbar and Floating Action Button move focus with Home and End as well as the arrow keys. A pressed toolbar button is now styled through aria-pressed, so restyle it with aria-pressed: instead of data-active.
  • useControllableState keeps the same setter between renders even when onChange is an inline function.

Added

Updated

7.3.0

Fields that match your inputs

New:

  • Nested App Sidebar. An app sidebar that swaps to a whole new list when you open a project or settings, instead of expanding a dropdown. The list slides in, a row at the top slides back, and it takes on your theme.
  • Hooks & utilities. The helpers the components are built on now have their own pages and install on their own: useControllableState, useReducedMotion, composeRefs and formatBytes. Hooks land in your hooks folder and helpers in lib.

Improved:

  • Pickers and selects look like your inputs. Date, date range, time, month, year and color pickers, Lazy Select and the Command Palette trigger are now your shadcn Button. Tag Input, Duration Input, Multi Select and Number Range sit on InputGroup. Corners, shadow, focus ring and the invalid state come from your theme.
  • Focus rings are back on Currency Input, Phone Input and Autocomplete.
  • Every label can be translated. Rich Text Editor and Data Table take a labels prop, and the other components take a prop per string.
  • Avatar Stack is built on shadcn Avatar, so a broken image falls back to the initials.
  • Announcement Bar's primary tone uses your primary color.
  • Date Range Picker fits on a phone screen.
  • Spinners, keyboard keys and Magnetic Button's default look now come from your shadcn components, in blocks as well as components.
  • Activity Feed avatars are shadcn Avatars, so a broken image falls back to the initials.
  • App shells in right-to-left layouts. The sidebar in the Sidebar Admin, Workspace Sidebar and Documents app shells now sits on the right instead of covering the page.

Removed:

  • Resizable Panels. It only re-exported shadcn Resizable; install resizable directly.
  • Stat Card. Use Metric Card, which covers the label, value and trend.

Added

Updated

7.2.0

Five integrations sections and a status grid

The integrations category grows from three sections to eight. Each one comes in both the Radix and Base UI versions.

  • Integrations 4: a centered hub with six linked tiles, and small pulses that travel in and out along each line.
  • Integrations 5: three tools feeding a central hub and three receiving from it, joined by curved paths. Good for explaining two-way sync.
  • Integrations 6: a row of tiles hung on a shallow arc over a faded grid. Each tile lifts when you hover it.
  • Integrations 7: copy and a button beside a grid of nine tiles. One tile is featured and moves on by itself. Hover or focus the grid to pause it, or click a tile to pick it.
  • Integrations 8: the quiet option. A short heading, one row of icons and a link to the full list.

The pulses and the cycling tile stop for visitors who prefer reduced motion.

Also new: Status 2, a grid of service health cards. Each card has a status dot, a response-time sparkline, and uptime and response figures side by side.

Added

7.1.0

Seven new kinds of blocks and seven new components

New kinds:

  • Surveys. An NPS card whose follow-up question changes with the score, a four-step feedback form with a review step, a cancellation survey that offers a discount or a pause depending on the reason, and a one-question-per-screen flow with letter-key answers and a branch that skips a question. All four are built on shadcn's Questionnaire, so they need a current shadcn style (the older new-york-v4 style doesn't have it).
  • Search. Faceted docs search whose counts react to the other filters, a search field with recent searches and full keyboard control, a results page with type tabs and a "Did you mean" correction, and a help center search.
  • Page headers. A detail header with copy link, archive and undoable delete, a tabbed header that keeps the tab in the URL, an invoice list header whose toolbar searches, filters, sorts and switches to a grid, and an analytics header whose date range swaps every metric.
  • Empty states. A first run that creates your first project, a no-results state that suggests close matches, a failed load that retries, and a members panel you invite people from.
  • Charts. Revenue bars you can stack or group, traffic areas with a shared crosshair, a channel donut linked to its ranked list, and a conversion funnel that shows where people drop off. Each one writes a one-line summary from its own numbers.
  • Chat. A two-pane messenger, a support widget with quick replies, a team channel with reactions and reply threads, and a shared inbox with snooze, internal notes and saved replies.
  • Bento grids. Four grids where every tile works: a deploy log that streams, a kanban you can move, a funnel that follows the segment you pick, and an audit trail you can pause.

New components:

  • Number Field. Step buttons, arrow keys, hold to repeat, and currency, percent or unit formatting. It submits the raw number.
  • Segmented Control. One choice with a sliding thumb, keyboard support that mirrors in RTL, and a full-width mode.
  • Autocomplete. Free text with suggestions from a list or an async search, with optional inline completion.
  • Checkbox Group. Select all with a mixed state, nested groups, limits and a search that narrows the list.
  • Gauge, Meter and Text Shimmer. A radial reading with threshold bands, a usage bar with segments, and a moving highlight for loading labels.

Also new:

  • Framed 404 Page. A 404 framed by side rails, with a photo, a way home and a band of popular pages.

Changed:

  • Every block has a real name. "Survey 3" is now "Cancellation Survey" and "Chart 1" is "Revenue Bar Chart", in the sidebar, on each page and in search. Install names stay the same.
  • Search finds more. Common words like price, 404, 2FA, donut, typeahead or inbox now lead to the right items.
  • Faster pages. Previews load when they scroll into view, fonts from other pages are no longer fetched, hero images load first, build files are cached for a year, and headlines no longer fade in from nothing.
  • Sans figures in more places. Date pickers, avatars, deltas, counts and prices moved off the monospace font. Real code and commands keep it.

Fixed:

  • Copy Button, Stepper and Rating demos scrolled sideways on phones.
  • Auth blocks asked the site for a page that doesn't exist.
  • Segmented Control's thumb stretched while it moved between options of different widths.

Added

Updated

7.0.0

Every item follows your theme

Hirael items now take on the design system of the project they land in. If you've customized your shadcn theme or primitives, installed items match it with no class cleanup.

Breaking:

  • Kbd now renders a <kbd>, like shadcn's. The pressable 3D keycap is KbdButton. KbdDisplay still works but is deprecated.
  • useCountdown returns null until the component mounts, so server and browser render the same thing.
  • Header 2 exports the header as Header02. The default export is a preview wrapper.
  • Callout no longer adds its own outer margin.

Your theme, everywhere:

  • Blocks and templates no longer use Hirael's own accent colors. Highlights, glows and live markers use your primary color, so they follow your theme and the Customizer.
  • Blocks that relied on this site's container class now center and pad themselves, so they no longer run edge to edge after install.
  • Status colors (success, warning, info) now ship with every item that uses them.

Improved:

  • Your own handlers and refs are respected. Passing onClick, onKeyDown, onPointerDown or a ref to a part now runs alongside the built-in behavior instead of replacing it, across about 30 components. Call event.preventDefault() to skip the built-in behavior.
  • Typing in Arabic, Chinese or Japanese no longer commits a tag, mention or inline edit mid-word.
  • Dates and numbers render the same on the server and in the browser, with locale defaulting to en-US. Pickers take locale, weekStartsOn (any day, including Saturday) and disabledDate on the root.
  • Date Range Picker won't select a range across disabled days, closes when the range is complete, and supports month / onMonthChange.
  • Kanban reports a keyboard move once, when you drop the card. Escape cancels without reporting anything.
  • Sortable no longer starts a drag from buttons or inputs inside an item.
  • Rich Text Editor no longer fires a change when you set its value. The callback is now onValueChange.
  • Copy Button falls back when clipboard access is blocked and reports failures with onCopyError.
  • QR Code draws dark modules on a light background, so it scans in dark mode too.
  • JSON Viewer handles circular values. Diff Viewer uses a much faster diff for large files.
  • Phone Input drops the national leading zero in E.164 output and shares the Country Select list.
  • Command Palette ignores its shortcut while you type in a field.
  • Magnetic Button, Tilt Card, Spotlight Card and Cursor Glow ignore touch drags.
  • Callout gains CalloutTitle and CalloutDescription, and every tone set now reads neutral / info / success / warning / destructive. Older names still work.
  • Labels like "Clear", "Copied" and "Loading…" can be changed through props, for any language.

Blocks:

  • Settings 1 and 2, Members, AI Chat and Subscription Plans confirm destructive actions and validate their forms.
  • VM Table and Pod Table use the Table primitive, with a sticky header and sorting.
  • App Shell 2 has a mobile menu. Env Editor keeps a revealed secret on its own row after a delete.
  • Dashboard 4 calculates its peak-hours share from the data.
  • Status 1 is far quicker to move through by keyboard, and Stats 1 shows real numbers before the page loads.
  • Code snippets in blocks use the regular font with tabular numbers.

Updated

6.9.0

Video Player and Relative Time

New:

  • Video Player. The same parts as Audio Player, for video: play, a seek bar with a buffered tint, time readouts, volume and full screen. Click the video or press Space to play, F for full screen, M to mute. Controls fade out while it plays and come back when you move the pointer.
  • Relative Time. A live "3 minutes ago" label on a real <time> element, formatted for any locale. Fresh times tick every second and older ones refresh less often, all from one shared timer.

Improved:

  • Blur Reveal, Scroll Reveal and Text Reveal no longer ship hidden HTML. Content already on screen shows right away, and content below the fold reveals as you reach it. All instances on a page share one observer.
  • Header 2. The mobile menu now drops in under the bar instead of stretching it, so opening it doesn't shift the page.
  • ASME. The hero video fades in and out more smoothly.

Added

Updated

6.8.1

Primitives match shadcn/ui exactly

No new items this time. The primitives underneath everything got resynced with shadcn/ui, so what a block expects and what your project already has are the same thing.

Changed:

  • ui/* is shadcn/ui, verbatim. The Radix tree now matches the CLI's new-york-v4 files and the Base UI tree matches base-vega, apart from right-to-left support: logical spacing, mirrored chevrons, and a carousel that follows the document direction. Hirael's own direction plumbing inside dialogs, sheets, popovers and tooltips is gone; dir on <html> is enough. SheetBody was a Hirael addition and is removed with it.
  • Blocks no longer restyle components. Colour, type and spacing overrides on shadcn and Hirael components inside blocks and templates moved to variants, wrappers or plain elements, so a block looks the same whether it renders against Hirael's copy of a primitive or yours.
  • Multi-select and lazy-select triggers. MultiSelectTrigger is a single box that is also the popover trigger, so the list matches its full width and chips can carry their remove buttons; it takes div props plus disabled. Both it and LazySelectTrigger drop the children render-prop form. If you passed one, render your own trigger with PopoverTrigger instead.

Fixed:

  • Sidebar and sheet on small screens. The sidebar's mobile breakpoint and drawer follow shadcn's again, so app shells behave like the docs describe.

Updated

6.8.0

Two new templates, Prism and AKOR

New:

  • Prism. A dark, liquid-glass landing page for an AI web design agency. The hero plays a looping video under a headline that blurs in word by word, with a partners row pinned to its foot. Below it: a how-it-works statement over video, two alternating feature rows with looping media, a four-card benefits grid, a stats band on a desaturated loop, three testimonials, and a video call to action that carries the footer. Barlow and Instrument Serif on a pure-black palette.
  • AKOR. A landing page for an intelligent-security firm. A fixed uppercase navbar sits over a full-screen video hero whose copy is anchored to the bottom corner, then the page inverts to a near-white services band with a numbered 2x2 card grid, drops back to black for an about split with a looping video beside the mission, and closes on a simple footer. Sora on a charcoal palette with a vivid green primary.

Both ship in the Radix UI and Base UI trees, and both use CSS-only entrances so nothing waits on hydration.

Added

6.7.0

Sixteen new sections for the thinnest kinds

New:

  • Header 3. A marketing header with Product, Solutions and Resources mega menus. Each flyout pairs a two-column link list with a featured entry, and on small screens the same groups fold into a side sheet.
  • Process 2. Four install steps. Picking one fills the connector up to it and swaps in a short checklist, and the section ends on a command you can copy.
  • Stats 3. A growth story beside four metrics measured against their targets, with a Quarter / Year toggle.
  • Blog 2. A post index as dated rows rather than cards, filtered by category, with a thumbnail that shows up on hover.
  • Changelog 2. A public roadmap in Now, Next and Later columns. Items take upvotes and sort by votes or date.
  • Newsletter 2. A waitlist that returns your place in line, an invite link to copy and the rewards referrals unlock.
  • E-commerce 3. A product page with a gallery, colour swatches and a size grid that disables sizes sold out in the chosen colour. Quantity is capped at what is in stock.
  • Team 3. A distributed team directory showing each person's local time and whether they are inside working hours, sortable by time zone.
  • Careers 2. A single job posting with the hiring stages spelled out and a sticky apply form that takes a CV and checks what you entered.
  • Image Gallery 2. A photo grid you can switch to rows, with captions on hover and a lightbox that opens at the photo you picked.
  • Logo Cloud 4. Customer wordmarks as tabs. Each one opens the result that customer got, and the row moves on by itself until you choose one.
  • Pricing 5. A usage calculator. Drag the sliders and the estimate, line items and volume tier update as you go, monthly or yearly.
  • Comparison 4. A plan matrix that highlights the column you point at and can hide every row where the plans are the same.
  • Testimonial 5. Customer stories that lead with a number, in a carousel with a counter and a segmented progress bar.
  • E-commerce 4. A category page with filters that really filter: counts react to each other, chips remove a filter, and on phones it all moves into a sheet.
  • Contact 4. A support form that shows the current reply time and suggests help articles as you type the subject.

Changed:

  • Feature 11 moves. The tab indicator slides, the active summary opens smoothly, and each preview panel eases in row by row.
  • Sections use the sans face. Numbers, dates and initials across the blocks moved from the monospace font to tabular sans figures. Real code and terminal output keep monospace.
  • Every section enters. Blocks that appeared all at once now rise in on a short stagger, and filters, tabs and success states ease between states instead of snapping. All of it stops under reduced motion.
  • Controls that did nothing now work. Sign-in forms validate and show errors, Add to cart updates a cart count, Checkout confirms an order, Connect toggles an integration, billing toggles swap prices, install commands and email addresses copy, notifications mark as read, tables filter by status, and the AI chat history opens past conversations.
  • Near-duplicates tell themselves apart. Pricing 1 and 2, Feature 2 and 3, Process 1, FAQ 7 and App Shell 4 and 5 now each cover a different case.
  • Heavy decoration is lighter. Spinning rings, pulsing glows and per-card canvases gave way to static accents, and decorative dots, boxed icon tiles and real brand names came out of the copy.

Fixed:

  • Pricing 3 showed "20% off" for a 17% saving.
  • Changelog 1 could show dates a day early west of UTC.
  • OTP Verify 1 and Two-Factor Setup 1 code inputs overflowed on phones.
  • Contact 3 ran the words of its heading together.
  • Pricing 4 and Testimonial 3 highlights never showed.
  • Logo Cloud 1 left empty grid cells filled in, and its numbers disagreed.
  • Feature 1 and Hero 9 promised more items than they listed.
  • Footer 3 and Footer 4 computed the year while rendering.

Added

6.5.0

Two feature blocks, and a rebuilt first one

New:

  • Feature 10. A mixed-cell bento for a product overview. One lattice holds a quote with attribution, two metric tiles, a latest-drop card with its own action, and a three-job list. Each cell carries a different kind of content rather than repeating the same tile six times.
  • Feature 11. A feature switcher. Three capabilities sit in a vertical tab list and the panel beside them previews whichever one you pick, from assigned conversations to saved replies and snooze times. Arrow keys move between the tabs, so it works without a mouse.

Changed:

  • Feature 1 is rebuilt. One bordered card of stacked stripes: a centered intro, two alternating rows pairing copy with a media panel you swap for a screenshot, then three primitive cards closing on a pair of calls to action.

Fixed:

  • Right-to-left previews mirror properly. Framed previews built on tabs, menus or anything else that tracks its own reading direction stayed left-to-right when you flipped the RTL toggle. They now follow the page.

Added

Updated

6.4.0

A new layout, and cn support

No new items this time. The site around them got rebuilt, and the catalog is ready for shadcn's new class-merging package.

Changed:

  • A new docs layout. A slim header holds the Customizer, the theme toggle and GitHub, and tabs for each part of the site stay pinned below it as you scroll. On a phone, the sidebar opens from the menu button.
  • The home page shows the catalog first. Three columns hold the latest templates, blocks and components, each with a preview and a link to the rest.
  • Outfit is the default font. Inter is still in the Customizer's Font picker if you prefer it.
  • Category pages say what's in them. Each component category now names the controls it holds, so Inputs lists multi-select, combobox, phone, currency, address and the rest instead of a vague summary.

Works with cn:

  • shadcn's new cn package replaces clsx and tailwind-merge with one faster function. Hirael items import cn from your own lib/utils, so after npx shadcn@latest migrate cn everything you have installed keeps working with no edits. This site runs on it too.

Fixed:

  • The header fits small phones. The logo and header buttons shrink a step on narrow screens instead of crowding the menu button.

Updated

6.3.0

Three components, seven sections

The biggest batch since the Base UI split: three new components, seven new sections, and a quiet pass over how the whole catalog handles state.

New components:

  • Address Input: a postal address that follows the country you pick. Choose the United States and you get City, State and ZIP code. Choose Germany and the postcode moves in front of the city and the region field disappears entirely. Twelve countries are described out of the box, and you can add your own.
  • Duration Input: hours and minutes as separate segments you can type through, with digits that carry into the next segment on their own. Arrows step, Shift and arrows step by ten, and the value stays a plain number of seconds.
  • Command Palette: the search dialog the command primitive stops short of. A platform shortcut, nested pages you can back out of with Backspace, remembered recents, and a shortcut hint on each row.

New sections, filling out the thinnest categories:

  • Logo clouds: Logo Cloud 2, two marquee rows running opposite ways, and Logo Cloud 3, a quiet single row over a pull quote.
  • Stats: Stats 2, four tiles each with their own sparkline.
  • Comparison: Comparison 2, a three-column feature matrix with one column highlighted, and Comparison 3, before and after side by side.
  • Integrations: Integrations 2, a filterable connector grid, and Integrations 3, a ruled connector list beside a sticky intro.

Fixed, across the catalog:

  • No more stale frames. A handful of components used to correct themselves one frame late: the audio player kept the previous track's progress for an instant, the lightbox opened a new image at the last one's pan offset, the mention field showed the previous highlight for a beat. They now settle before they paint.
  • Refs behave. Components that keep an internal ref no longer look like they are reading it while rendering, which is what React's own lint has been warning about. Copy any of them into a project with those rules on and the file is quiet.
  • Lazy Select stops rebuilding its label cache. Labels are folded in by content rather than by array identity, so passing a freshly built options array on every render no longer matters.

Added

6.2.0

Docs your agent can read

No new components this time. Instead, everything already in the catalog got easier to read, both for you and for whatever you have reading the docs on your behalf.

New:

  • Copy page. A button on every component, block and template page that copies the whole page as Markdown: install command, usage, every demo, the full source and the API table. Paste it into an agent and it has the same picture you do.
  • The same page at a URL. That Markdown lives at /r/<name>.md next to the payload the CLI installs from, so you can hand over a link instead of a paste. Base UI items are at /r/base/<name>.md. Imports in the source are rewritten to the paths the CLI actually installs to, so what you read is what you get.
  • Related items at the bottom of each detail page, and a Shipped line saying which release an item arrived in. Anything from the last week wears a New badge.
  • Recently added on the home page, so the newest items are the first thing you see.

Changed:

  • Links preview. Paste a component, block or template URL into Slack, Discord or anywhere else and you get that item's own preview image and description, not the same site-wide card every time.
  • Search results carry structure, so a component page shows up as a component rather than an untitled page.

Fixed:

  • Refs reach the element you expect. Components that keep an internal ref used to quietly drop the one you passed. They now compose the two, so measuring, focusing or scrolling a component from your own code works the way it does with a plain element.

6.0.0

Two bases, a Customizer, and 20 new sections

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.

Added

Updated

5.0.0

The app side, AI chat, and the shadcn rebuild

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.

Added

Updated

4.1.0

Browse and try everything in place

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.

4.0.0

Initial release

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.