---
name: "@hirael"
slug: "hirael"
description: "The components shadcn/ui doesn't ship. A collection of high-utility React components built on top of shadcn/ui."
category: "Animated components"
tags: ["animation", "audio", "auth", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "e-commerce", "editor", "forms", "hooks", "icons", "loaders", "maps", "marketing", "media", "navigation", "onboarding", "overlays", "pro-available", "tables"]
framework: "react"
license: "MIT"
author: "MohammadShehadeh"
website: "https://hirael.com"
github: "https://github.com/MohammadShehadeh/hirael"
registry: "https://hirael.com/r/registry.json"
pro: true
pro_url: "https://hirael.com/blocks/pricing"
github_stars: 24
component_count: 241
generated_at: "2026-09-21T01:50:16.753Z"
---

# @hirael

The components shadcn/ui doesn't ship. A collection of high-utility React components built on top of shadcn/ui.

## Links

- Website: https://hirael.com
- GitHub: https://github.com/MohammadShehadeh/hirael
- Registry JSON: https://hirael.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/hirael
- This file: https://sh4dcn.vercel.app/md/hirael.md
- Pro / pricing: https://hirael.com/blocks/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://hirael.com/r/registry.json
pnpm dlx shadcn@latest add https://hirael.com/r/registry.json
bunx shadcn@latest add https://hirael.com/r/registry.json
# clone the source repo
git clone https://github.com/MohammadShehadeh/hirael.git
# fetch the raw registry index
curl -s https://hirael.com/r/registry.json
```

## Components (241)

| name | type | description | install |
| --- | --- | --- | --- |
| multi-select | registry:component | Chip-based multi-select with command-palette dropdown, search, select-all and async loader. Compound and single-prop APIs. | `npx shadcn@latest add https://hirael.com/r/multi-select.json` |
| number-range | registry:component | Two-thumb slider paired with synced number inputs. Min/max/step, currency or unit formatting, keyboard-first. | `npx shadcn@latest add https://hirael.com/r/number-range.json` |
| year-picker | registry:component | Decade-grid year picker with keyboard nav, min/max bounds, single or range mode. | `npx shadcn@latest add https://hirael.com/r/year-picker.json` |
| tag-input | registry:component | Chip input with paste-to-split, dedupe, validation hook, max tags. Compound and single-prop APIs. | `npx shadcn@latest add https://hirael.com/r/tag-input.json` |
| duration-input | registry:component | Segmented duration field over days, hours, minutes and seconds. Digits auto-advance, arrows step, and the value stays a plain number of seconds. | `npx shadcn@latest add https://hirael.com/r/duration-input.json` |
| combobox | registry:component | Searchable select on Base UI: single or multiple selection, chips, grouped options, an input addon slot and a clear button. | `npx shadcn@latest add https://hirael.com/r/combobox.json` |
| lazy-select | registry:component | Autocomplete single-select that defers loading until open and pages through results on scroll. Debounced server-side search with a pluggable lazy paginator hoo… | `npx shadcn@latest add https://hirael.com/r/lazy-select.json` |
| password-input | registry:component | Show/hide toggle with an optional pluggable strength meter. Compound and single-prop APIs. | `npx shadcn@latest add https://hirael.com/r/password-input.json` |
| currency-input | registry:component | Locale-aware grouping with currency-symbol prefix and configurable decimal precision. | `npx shadcn@latest add https://hirael.com/r/currency-input.json` |
| phone-input | registry:component | Country dial-code dropdown with E.164 output. Compound and single-prop APIs. | `npx shadcn@latest add https://hirael.com/r/phone-input.json` |
| file-dropzone | registry:component | Drag-drop + click upload zone with previews, accept and max-size validation. Compound and single-prop APIs. | `npx shadcn@latest add https://hirael.com/r/file-dropzone.json` |
| stat-card | registry:component | Compact metric card with label, value, and an up/down/flat trend chip. Compound and single-prop APIs. | `npx shadcn@latest add https://hirael.com/r/stat-card.json` |
| rating | registry:component | Star rating with hover preview, half-star precision, read-only mode and sm / md / lg sizes. | `npx shadcn@latest add https://hirael.com/r/rating.json` |
| timeline | registry:component | Vertical event timeline with default or icon dots, tone variants and labelled time / title / description parts. | `npx shadcn@latest add https://hirael.com/r/timeline.json` |
| kbd | registry:component | 3D tactile keycap with hover lift and pressed states. Compound API with KbdGroup for chords and KbdDisplay for inline keys. | `npx shadcn@latest add https://hirael.com/r/kbd.json` |
| callout | registry:component | MDX-style admonition with info / success / warning / error / neutral variants and optional icon override. Ships --info / --success / --warning theme tokens. | `npx shadcn@latest add https://hirael.com/r/callout.json` |
| scroll-progress | registry:component | Fixed reading progress bar. Tracks document scroll by default or a scoped container ref. | `npx shadcn@latest add https://hirael.com/r/scroll-progress.json` |
| hero-01 | registry:block | Full-bleed hero card over an animated light-beam shader, with a glass pill nav, a trust badge, a serif headline, dual CTA and a three-stat footer. | `npx shadcn@latest add https://hirael.com/r/hero-01.json` |
| hero-02 | registry:block | Centered hero over animated gradient bars, with a release pill, a serif headline with an underlined accent, dual CTA and a wordmark strip. | `npx shadcn@latest add https://hirael.com/r/hero-02.json` |
| hero-03 | registry:block | Editorial centered hero on a faded grid, with a serif headline, sub-copy, dual CTA and a logo cloud of customer wordmarks. | `npx shadcn@latest add https://hirael.com/r/hero-03.json` |
| hero-04 | registry:block | Full-bleed image-banner hero with a dark scrim, a slim nav, a serif headline and dual CTA aligned to the bottom. | `npx shadcn@latest add https://hirael.com/r/hero-04.json` |
| hero-05 | registry:block | Full-bleed hero card over an animated aurora shader, with a pill nav, a live status pill, a serif headline, dual CTA and an avatar social-proof row. | `npx shadcn@latest add https://hirael.com/r/hero-05.json` |
| feature-01 | registry:block | One bordered card of stacked stripes: a centered intro, three alternating rows pairing an indexed layer with a small deploys, previews or release-rules mockup,… | `npx shadcn@latest add https://hirael.com/r/feature-01.json` |
| feature-02 | registry:block | Centered header above a six-item list of what every catalog item includes, laid out on hairline rows with a tabular index kicker. | `npx shadcn@latest add https://hirael.com/r/feature-02.json` |
| pricing-01 | registry:block | Three-tier card row with a monthly/yearly toggle that swaps each price and billing note, a featured middle plan, feature checklist and CTA. | `npx shadcn@latest add https://hirael.com/r/pricing-01.json` |
| pricing-02 | registry:block | Plan comparison table with grouped feature rows and a per-plan CTA in the header; on small screens a plan picker shows one plan column at a time. | `npx shadcn@latest add https://hirael.com/r/pricing-02.json` |
| pricing-03 | registry:block | Three-tier card row with a monthly/yearly billing toggle that tweens the price, a featured plan, per-plan icon, feature checklist and CTA. | `npx shadcn@latest add https://hirael.com/r/pricing-03.json` |
| testimonial-01 | registry:block | Centered single quote with stylized open-mark, author block (avatar, name, role, company) and a muted wordmark row below. | `npx shadcn@latest add https://hirael.com/r/testimonial-01.json` |
| testimonial-02 | registry:block | Masonry quote grid (CSS columns) with ~6 bordered quote cards of varying length and author rows. | `npx shadcn@latest add https://hirael.com/r/testimonial-02.json` |
| cta-01 | registry:block | Framed CTA card with headline and sub-copy on the left, and an install command with a copy button above a browse button on the right. | `npx shadcn@latest add https://hirael.com/r/cta-01.json` |
| cta-02 | registry:block | Full-bleed centered CTA with framing top/bottom rules, highlight underlay on the key word, and an install command with a copy button. | `npx shadcn@latest add https://hirael.com/r/cta-02.json` |
| cta-03 | registry:block | Full-bleed CTA card with an animated dithered shader backdrop, an eyebrow pill, a serif headline and a pill action button. | `npx shadcn@latest add https://hirael.com/r/cta-03.json` |
| faq-01 | registry:block | Two-column FAQ: sticky heading and a hairline help note on the start side, numbered accordion on the end side. | `npx shadcn@latest add https://hirael.com/r/faq-01.json` |
| faq-02 | registry:block | Centered heading with two-column accordion grid below. Each row tagged with a Qn index. | `npx shadcn@latest add https://hirael.com/r/faq-02.json` |
| faq-03 | registry:block | Searchable FAQ with category tabs, a live-filtered accordion, an empty state for missed queries and a support CTA strip. | `npx shadcn@latest add https://hirael.com/r/faq-03.json` |
| faq-04 | registry:block | Framed single-column FAQ with side rules, a centered display header with a topic jump nav, five topic groups each pairing a heading with its own accordion, and… | `npx shadcn@latest add https://hirael.com/r/faq-04.json` |
| login-01 | registry:block | Centered login card with monogram, email + password (using the password-input component), remember-me, divider and GitHub / Google providers. | `npx shadcn@latest add https://hirael.com/r/login-01.json` |
| login-02 | registry:block | Two-pane login: form on the left, dark testimonial panel with quote and metrics on the right. Uses the strength-meter variant of password-input. | `npx shadcn@latest add https://hirael.com/r/login-02.json` |
| signup-01 | registry:block | Centered signup card with monogram, name + email, strength-meter password-input, terms checkbox, divider and GitHub / Google providers. Validates inline on sub… | `npx shadcn@latest add https://hirael.com/r/signup-01.json` |
| forgot-password-01 | registry:block | Centered reset-request card: email with inline validation and a pending submit, swapping to a check-your-inbox state that echoes the address with resend and ba… | `npx shadcn@latest add https://hirael.com/r/forgot-password-01.json` |
| otp-verify-01 | registry:block | Centered verification card built on InputOTP: six slots that fit a phone screen, paste support, auto-verify on the last digit, a 30s resend countdown announced… | `npx shadcn@latest add https://hirael.com/r/otp-verify-01.json` |
| header-01 | registry:block | Sticky top nav with brand monogram, centered anchor links, dual auth CTAs and a slide-down mobile menu. | `npx shadcn@latest add https://hirael.com/r/header-01.json` |
| header-02 | registry:block | Floating nav that runs full width at the top of the page and shrinks into a blurred pill once you scroll past 100px, with a spring-animated width change. Links… | `npx shadcn@latest add https://hirael.com/r/header-02.json` |
| header-03 | registry:block | Sticky marketing header with Product, Solutions and Resources mega menus, each a two-column link list beside a featured entry, plain Pricing and Docs links, an… | `npx shadcn@latest add https://hirael.com/r/header-03.json` |
| footer-01 | registry:block | Brand + tagline column alongside Product / Company / Resources link columns, with a copyright row and social icons below a thin rule. | `npx shadcn@latest add https://hirael.com/r/footer-01.json` |
| not-found-01 | registry:block | Centered 404 with mono eyebrow, display headline, paired CTAs and a 'try one of these' suggested-routes list. | `npx shadcn@latest add https://hirael.com/r/not-found-01.json` |
| month-picker | registry:component | 4×3 month grid with year stepper, keyboard nav, min/max bounds, single or range mode. | `npx shadcn@latest add https://hirael.com/r/month-picker.json` |
| time-picker | registry:component | Hour, minute and optional second scroll columns with 12/24h modes, step intervals and keyboard nav. | `npx shadcn@latest add https://hirael.com/r/time-picker.json` |
| color-picker | registry:component | SV gradient + hue slider with HEX / RGB / HSL tabs, eyedropper (where supported) and recent swatches. | `npx shadcn@latest add https://hirael.com/r/color-picker.json` |
| avatar-stack | registry:component | Overlapping avatar group with size (sm/md/lg) and spacing (tight/normal/loose) variants, image or fallback support, numeric overflow chip, and asChild on items… | `npx shadcn@latest add https://hirael.com/r/avatar-stack.json` |
| announcement-bar | registry:component | Top-of-page banner with default / primary / muted tones, optional dismiss button and localStorage persistence. | `npx shadcn@latest add https://hirael.com/r/announcement-bar.json` |
| logo-cloud-01 | registry:block | Centered eyebrow + headline above a 6-column bordered wordmark grid, with stat strip and case-study link below. | `npx shadcn@latest add https://hirael.com/r/logo-cloud-01.json` |
| logo-cloud-02 | registry:block | Two full-bleed marquee rows of wordmarks running in opposite directions, edges faded into the page, each row holding still on hover. | `npx shadcn@latest add https://hirael.com/r/logo-cloud-02.json` |
| logo-cloud-03 | registry:block | Quiet single-row wordmark strip that brightens on hover, a rule, then a pull quote with an avatar and attribution. | `npx shadcn@latest add https://hirael.com/r/logo-cloud-03.json` |
| logo-cloud-04 | registry:block | Six customer wordmarks as tabs, each opening a proof panel with a metric, a short quote and a story link. It advances on its own, pauses on hover or focus, and… | `npx shadcn@latest add https://hirael.com/r/logo-cloud-04.json` |
| contact-01 | registry:block | Production contact form with controlled state, inline validation, character counter, topic select, consent checkbox and a pending/sent state machine. Channel l… | `npx shadcn@latest add https://hirael.com/r/contact-01.json` |
| blog-01 | registry:block | Editorial blog index with a featured post on top and a 4-column grid of post cards underneath. Built on Card and Badge. | `npx shadcn@latest add https://hirael.com/r/blog-01.json` |
| blog-02 | registry:block | Editorial post index as dated rows with a thumbnail that surfaces on hover, category tabs with counts that filter the list, and an empty state for a category w… | `npx shadcn@latest add https://hirael.com/r/blog-02.json` |
| ecommerce-01 | registry:block | Product grid with category filter pills, sale and new badges, wishlist toggles, star ratings, compare-at pricing and add-to-cart buttons that update a live car… | `npx shadcn@latest add https://hirael.com/r/ecommerce-01.json` |
| ecommerce-02 | registry:block | Shopping cart with capped quantity steppers, animated line-item removal, promo-code validation, a free-shipping threshold, live totals, a checkout that confirm… | `npx shadcn@latest add https://hirael.com/r/ecommerce-02.json` |
| ecommerce-03 | registry:block | Product detail page with a thumbnail gallery, colour swatches, a size grid that knows what is sold out in each colour, a stock-capped quantity stepper, add to … | `npx shadcn@latest add https://hirael.com/r/ecommerce-03.json` |
| ecommerce-04 | registry:block | Category page with a sticky filter sidebar (category counts that react to the other filters, price range, colour, stock, rating), removable filter chips, sorti… | `npx shadcn@latest add https://hirael.com/r/ecommerce-04.json` |
| dashboard-01 | registry:block | Operations dashboard with a Tabs date-range switcher (1d / 7d / 30d / 90d), a 4-up metric strip, a weekly bar chart and a recent-activity feed. Every metric de… | `npx shadcn@latest add https://hirael.com/r/dashboard-01.json` |
| dashboard-02 | registry:block | Analytics dashboard with a date-range select, four sparkline KPI tiles, a layered two-series area chart and top-pages and channel-share side cards. Deltas carr… | `npx shadcn@latest add https://hirael.com/r/dashboard-02.json` |
| dashboard-03 | registry:block | Revenue dashboard with a month stepper, a plan-mix donut and legend, an invoice status list and a paginated transactions list. Amounts are numbers formatted th… | `npx shadcn@latest add https://hirael.com/r/dashboard-03.json` |
| dashboard-04 | registry:block | Commerce operations dashboard in a card-in-card style: four inset stat tiles, a Today band pairing an hourly two-series revenue chart with ad-budget and peak-h… | `npx shadcn@latest add https://hirael.com/r/dashboard-04.json` |
| dashboard-05 | registry:block | Observability dashboard composed as one bordered lattice: greeting strip with range select, four sparkline KPI cells, cache and duration chart cells, an AI-ins… | `npx shadcn@latest add https://hirael.com/r/dashboard-05.json` |
| integrations-01 | registry:block | Two-column integrations section with copy and a linked integration list on the left, and an orbit diagram (central hub with 6 spokes) on the right that highlig… | `npx shadcn@latest add https://hirael.com/r/integrations-01.json` |
| integrations-02 | registry:block | Filterable connector grid: a category toggle group above a card grid, where each card connects or disconnects with a pending state and a running connected coun… | `npx shadcn@latest add https://hirael.com/r/integrations-02.json` |
| integrations-03 | registry:block | Two-column integrations page: a sticky intro with a request-an-integration popover form beside a ruled list of linked connectors and their status. | `npx shadcn@latest add https://hirael.com/r/integrations-03.json` |
| image-gallery-01 | registry:block | Studio-style masonry gallery with a Tabs category filter showing counts, photo tiles in varied aspect ratios that open in a lightbox with thumbnails, and an em… | `npx shadcn@latest add https://hirael.com/r/image-gallery-01.json` |
| image-gallery-02 | registry:block | Photo grid with a Grid and Rows layout switch, captions on hover or focus, and a lightbox with thumbnails that opens at the chosen photo and returns focus to i… | `npx shadcn@latest add https://hirael.com/r/image-gallery-02.json` |
| app-shell-01 | registry:block | Drop-in admin shell built on the shadcn Sidebar primitive: collapsible icon rail with nav badges and an account menu in the footer, sticky topbar with breadcru… | `npx shadcn@latest add https://hirael.com/r/app-shell-01.json` |
| app-shell-02 | registry:block | Sidebar-free admin shell with a sticky top bar over a working settings screen: vertical tabs with roving keyboard focus, a header search that filters every sec… | `npx shadcn@latest add https://hirael.com/r/app-shell-02.json` |
| app-shell-03 | registry:block | Split-pane inbox shell: icon rail with unread indicator, a searchable conversation listbox you can walk with the arrow keys, and a reading pane where star, arc… | `npx shadcn@latest add https://hirael.com/r/app-shell-03.json` |
| app-shell-04 | registry:block | Starter shell on the shadcn Sidebar primitive (inset variant): a workspace switcher that switches, a ⌘K field that filters the nav, icon-collapsible items with… | `npx shadcn@latest add https://hirael.com/r/app-shell-04.json` |
| spinner | registry:component | Loading indicator with circle, dots and bars variants, sm / md / lg sizes. Inherits the current text color and ships an accessible status label. | `npx shadcn@latest add https://hirael.com/r/spinner.json` |
| copy-button | registry:component | Click-to-copy button with copied feedback, icon-only or labelled, ghost / outline variants and a non-secure-context clipboard fallback. | `npx shadcn@latest add https://hirael.com/r/copy-button.json` |
| icon-stack | registry:component | Isometric stack of plates with an icon skewed onto the front face, for feature headers and empty states. Layer count is a prop, and the plates take their color… | `npx shadcn@latest add https://hirael.com/r/icon-stack.json` |
| marquee | registry:component | Infinite scrolling row or column for logos and testimonials, with pause-on-hover, reverse and vertical modes. Keyframes ship inline, zero config. | `npx shadcn@latest add https://hirael.com/r/marquee.json` |
| tree-view | registry:component | Collapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus. | `npx shadcn@latest add https://hirael.com/r/tree-view.json` |
| animated-number | registry:component | Count-up number that tweens to its target with easing, Intl formatting (currency, compact, percent), prefix/suffix and reduced-motion support. | `npx shadcn@latest add https://hirael.com/r/animated-number.json` |
| stepper | registry:component | Multi-step progress indicator with horizontal and vertical orientation, completed / active / inactive states, clickable steps and a compound API. | `npx shadcn@latest add https://hirael.com/r/stepper.json` |
| sortable | registry:component | Drag-to-reorder list with pointer and keyboard sorting, handle or whole-item dragging, and live-region announcements. No dnd-kit. | `npx shadcn@latest add https://hirael.com/r/sortable.json` |
| date-picker | registry:component | Single-date picker with month grid, keyboard nav, min/max bounds and disabled dates. Includes an inline DateCalendar, no date library. | `npx shadcn@latest add https://hirael.com/r/date-picker.json` |
| date-range-picker | registry:component | Dual-month range picker with hover preview, presets, min/max bounds and keyboard nav. Includes an inline DateRangeCalendar, no date library. | `npx shadcn@latest add https://hirael.com/r/date-range-picker.json` |
| mention-input | registry:component | @-mention textarea with caret-anchored autocomplete, highlighted mention chips, async search and multiple trigger characters. | `npx shadcn@latest add https://hirael.com/r/mention-input.json` |
| rich-text-editor | registry:component | Tiptap editor with a formatting toolbar (headings, lists, links, highlight, alignment) and a hover bubble to edit or unlink links inline. Outputs HTML, control… | `npx shadcn@latest add https://hirael.com/r/rich-text-editor.json` |
| inline-edit | registry:component | Click-to-edit text with preview, validation, async submit and confirm/cancel controls. Input and textarea modes. | `npx shadcn@latest add https://hirael.com/r/inline-edit.json` |
| signature-pad | registry:component | Canvas signature capture with velocity-based ink, per-stroke undo, theme-aware re-inking and PNG/JPEG export via ref. | `npx shadcn@latest add https://hirael.com/r/signature-pad.json` |
| image-cropper | registry:component | Pan-and-zoom image cropper with rect or round mask, fixed aspect frame, pinch / wheel / keyboard control and canvas export via ref. | `npx shadcn@latest add https://hirael.com/r/image-cropper.json` |
| image-compare | registry:component | Before/after comparison slider with a draggable, keyboard-accessible divider, horizontal or vertical orientation and hover-follow mode. | `npx shadcn@latest add https://hirael.com/r/image-compare.json` |
| lightbox | registry:component | Fullscreen image lightbox on Radix Dialog with gallery navigation, zoom and pan, swipe gestures, captions and a thumbnail strip. | `npx shadcn@latest add https://hirael.com/r/lightbox.json` |
| countdown-timer | registry:component | Count-down-to-date timer with boxed / inline / minimal variants, a useCountdown hook, digit animation and completion content. | `npx shadcn@latest add https://hirael.com/r/countdown-timer.json` |
| qr-code | registry:component | Dependency-free QR code generator rendering crisp SVG, with L/M/Q/H error correction, quiet-zone control and currentColor theming. | `npx shadcn@latest add https://hirael.com/r/qr-code.json` |
| calendar-heatmap | registry:component | GitHub-style contribution heatmap with month and weekday labels, tooltips, configurable intensity scale and a legend. | `npx shadcn@latest add https://hirael.com/r/calendar-heatmap.json` |
| code-block | registry:component | Code display with built-in dependency-free syntax highlighting via theme tokens, line numbers, line highlights, diff gutters, copy button and collapsible max-h… | `npx shadcn@latest add https://hirael.com/r/code-block.json` |
| masonry | registry:component | True masonry layout that balances children into the shortest column by measured height, order-preserving, responsive, dependency-free. | `npx shadcn@latest add https://hirael.com/r/masonry.json` |
| audio-player | registry:component | Composable audio player with play/pause, scrub-safe seek with buffered tint, skip, time readouts, volume and playback rate. | `npx shadcn@latest add https://hirael.com/r/audio-player.json` |
| media-input | registry:component | Local media file picker that previews via an object URL; empty-state prompt, replace and clear, size validation. Nothing leaves the browser. | `npx shadcn@latest add https://hirael.com/r/media-input.json` |
| tour | registry:component | Onboarding spotlight that dims the page around a target element and walks users through steps with a positioned coach-mark card. | `npx shadcn@latest add https://hirael.com/r/tour.json` |
| activity-feed | registry:block | Avatar-led event feed with a connecting rail, actor and action lines, timestamps, quoted bodies and date dividers. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/activity-feed.json` |
| audit-log | registry:block | Compliance-style event log with expandable rows that reveal actor, action, status and request metadata. Composable disclosure parts. | `npx shadcn@latest add https://hirael.com/r/audit-log.json` |
| blur-reveal | registry:component | Reveals content with a blur, fade and lift as it scrolls into view. Configurable delay, duration and threshold; respects reduced-motion. | `npx shadcn@latest add https://hirael.com/r/blur-reveal.json` |
| text-reveal | registry:component | Staggered text entrance that masks and slides each word, character or line into place on scroll. Respects reduced-motion. | `npx shadcn@latest add https://hirael.com/r/text-reveal.json` |
| scroll-reveal | registry:component | Fades and slides content in from any direction as it enters the viewport. Configurable distance, delay and replay; respects reduced-motion. | `npx shadcn@latest add https://hirael.com/r/scroll-reveal.json` |
| spotlight-card | registry:component | Card surface with a soft spotlight that tracks the cursor and fades in on hover. Built on design tokens, no hard-coded colors. | `npx shadcn@latest add https://hirael.com/r/spotlight-card.json` |
| magnetic-button | registry:component | Button that pulls toward the cursor and springs back on leave. Adjustable strength, asChild to wrap a link, respects reduced-motion. | `npx shadcn@latest add https://hirael.com/r/magnetic-button.json` |
| cursor-glow | registry:component | Ambient glow layer that follows the pointer across its container and fades when it leaves. Drop it behind heroes, grids or feature panels. | `npx shadcn@latest add https://hirael.com/r/cursor-glow.json` |
| sparkles | registry:component | Canvas particle field that drifts and twinkles behind any container. Density scales with size, colors resolve from tokens, and it pauses offscreen and under re… | `npx shadcn@latest add https://hirael.com/r/sparkles.json` |
| tilt-card | registry:component | 3D pointer tilt with optional cursor-following glare and configurable max angle, scale and perspective. Respects reduced-motion. | `npx shadcn@latest add https://hirael.com/r/tilt-card.json` |
| morphing-dialog | registry:component | A trigger card that morphs into a centered dialog via shared-layout animation, with focus trapping, scroll lock, Esc to close and reduced-motion support. | `npx shadcn@latest add https://hirael.com/r/morphing-dialog.json` |
| dock | registry:component | macOS-style dock with cursor magnification: icons scale and spring as the pointer passes, with hover and focus labels. Built on motion. | `npx shadcn@latest add https://hirael.com/r/dock.json` |
| floating-action-button | registry:component | Expanding speed-dial FAB: a primary trigger that rotates open to stagger a stack of secondary actions on any side. Compound API. | `npx shadcn@latest add https://hirael.com/r/floating-action-button.json` |
| floating-toolbar | registry:component | Floating pill toolbar for text selection and canvas actions, with toggle buttons, separators and labels. Position it anywhere. | `npx shadcn@latest add https://hirael.com/r/floating-toolbar.json` |
| split-view | registry:component | Two-pane master/detail layout with a draggable divider, keyboard resize, min/max bounds and horizontal or vertical orientation. RTL-aware. | `npx shadcn@latest add https://hirael.com/r/split-view.json` |
| resizable-panels | registry:component | Composable resizable panel groups with draggable, keyboard-accessible handles, per-panel minimums and nestable horizontal or vertical groups. RTL-aware. | `npx shadcn@latest add https://hirael.com/r/resizable-panels.json` |
| inspector-panel | registry:block | Design-tool inspector with a header, collapsible sections and label/control rows. Composable parts for property panels and sidebars. | `npx shadcn@latest add https://hirael.com/r/inspector-panel.json` |
| tenant-switcher | registry:block | Workspace, organization or project switcher for multi-tenant apps. Logo or initials, plan or role caption, grouped and searchable list, and a create action. Sh… | `npx shadcn@latest add https://hirael.com/r/tenant-switcher.json` |
| kpi-grid | registry:block | Hairline-joined grid of KPI tiles with label, value, an up/down/flat delta chip and a dependency-free sparkline. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/kpi-grid.json` |
| quick-actions | registry:block | Grid of dashboard shortcut tiles with icon, label and description; each opens a small form and shows its result in place. Each tile is a button or, via asChild… | `npx shadcn@latest add https://hirael.com/r/quick-actions.json` |
| notifications | registry:block | Notification panel with an All/Unread filter, mark all read, per-item mark read and dismiss, an empty state, and an accent-cool unread marker. Ships composable… | `npx shadcn@latest add https://hirael.com/r/notifications.json` |
| billing-card | registry:block | Current-plan summary with price, a usage meter, billing detail rows and footer actions. Composable parts for billing settings. | `npx shadcn@latest add https://hirael.com/r/billing-card.json` |
| subscription-plans | registry:block | In-app plan selector with featured and current states, a badge, feature checklist and per-plan action. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/subscription-plans.json` |
| api-keys | registry:block | API key manager with reveal/hide, copy-to-clipboard, key metadata and a create action. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/api-keys.json` |
| usage-dashboard | registry:block | Metered usage panel with per-resource progress bars that tint amber near the limit and red over it. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/usage-dashboard.json` |
| creative-studio | registry:block | Dark, cinematic creative-studio landing page: a full-viewport hero with an animated backdrop and pull-up wordmark, a scroll-revealed about section, and a stagg… | `npx shadcn@latest add https://hirael.com/r/creative-studio.json` |
| agency-landing | registry:block | Bright, shader-lit agency landing page: a full-viewport hero with an animated WebGL backdrop and pill navigation, an editorial about section, a featured-work g… | `npx shadcn@latest add https://hirael.com/r/agency-landing.json` |
| mindloop | registry:block | Dark, monochrome newsletter landing page: a full-screen video hero with an inline subscribe form, an answer-engine section, scroll-revealed mission copy, a fou… | `npx shadcn@latest add https://hirael.com/r/mindloop.json` |
| portfolio | registry:block | Dark, single-page personal portfolio: a counter loading screen, an HLS video hero with a floating nav and a cycling role line, a bento work grid, a journal lis… | `npx shadcn@latest add https://hirael.com/r/portfolio.json` |
| usd-halo | registry:block | Premium fintech landing page for a stablecoin: a full-bleed video hero with a custom halo wordmark and an infinite brand marquee, a meet-the-product card grid,… | `npx shadcn@latest add https://hirael.com/r/usd-halo.json` |
| rivr | registry:block | DeFi staking landing page for a fluid-asset protocol: a video hero on a rounded card with glass stat cards and a carved documentation corner, a metrics band, a… | `npx shadcn@latest add https://hirael.com/r/rivr.json` |
| velorah | registry:block | Dark, premium landing page for an electric RV brand: a full-screen video hero with liquid-glass navigation, a centered tagline, a split feature card with switc… | `npx shadcn@latest add https://hirael.com/r/velorah.json` |
| asme | registry:block | Dark, liquid-glass marketing landing page: a full-viewport hero with a cross-fading background video, a frosted glass pill nav and an inline email form, then s… | `npx shadcn@latest add https://hirael.com/r/asme.json` |
| prism | registry:block | Dark, liquid-glass landing page for an AI web design agency: a fixed glass pill nav, a full-screen video hero whose headline blurs in word by word over a partn… | `npx shadcn@latest add https://hirael.com/r/prism.json` |
| akor | registry:block | Dark landing page for an intelligent-security firm: a fixed uppercase navbar, a full-screen video hero with copy anchored bottom-start, an inverted near-white … | `npx shadcn@latest add https://hirael.com/r/akor.json` |
| nexacore | registry:block | Light enterprise-infrastructure landing page: a floating pill navbar that shrinks on scroll, a full-screen video hero, a dark service-card grid that unfolds on… | `npx shadcn@latest add https://hirael.com/r/nexacore.json` |
| aurael | registry:block | Bilingual (EN/AR) landing page for a home-solar brand, built around a day/night control that re-themes the whole page: a full-height photographic hero that cro… | `npx shadcn@latest add https://hirael.com/r/aurael.json` |
| novael | registry:block | Bilingual (EN/AR) landing page for a technology services firm: a fixed scroll-spy navbar over a headline that sits on a photographic band, an overlapping intro… | `npx shadcn@latest add https://hirael.com/r/novael.json` |
| hero-06 | registry:block | Centered personal hero: a live "available for work" badge, a serif headline with a primary-tinted emphasis span, a sub-line, a three-stat row with hairline div… | `npx shadcn@latest add https://hirael.com/r/hero-06.json` |
| hero-07 | registry:block | Centered hero with a word-by-word blur-in serif headline, a glass beta badge with a live dot, dual rounded CTAs, and animated beam line-art SVGs that trace the… | `npx shadcn@latest add https://hirael.com/r/hero-07.json` |
| hero-08 | registry:block | Centered hero on a framed, token-lit panel: a pill badge, a serif headline with an italic emphasis span, sub-copy, dual CTA buttons, and a window preview of a … | `npx shadcn@latest add https://hirael.com/r/hero-08.json` |
| testimonial-03 | registry:block | Centered statement quote with a serif display, an inline quote glyph in the corner, gradient hairline dividers, and a highlighted phrase, closed by a small att… | `npx shadcn@latest add https://hirael.com/r/testimonial-03.json` |
| testimonial-04 | registry:block | Three-column quote grid under a centered pill badge and word-by-word headline. Each card opens with a quote mark, then the quote and an author line. Cards rise… | `npx shadcn@latest add https://hirael.com/r/testimonial-04.json` |
| testimonial-05 | registry:block | Customer stories carousel where each card leads with a measured result, then a short quote, the person behind it and a link to the case study, with a slide cou… | `npx shadcn@latest add https://hirael.com/r/testimonial-05.json` |
| cta-04 | registry:block | Centered get-in-touch CTA with a pill eyebrow, serif headline, mail button, a copy-to-clipboard email address, and GitHub and LinkedIn icon buttons, capped by … | `npx shadcn@latest add https://hirael.com/r/cta-04.json` |
| cta-05 | registry:block | Contact CTA panel with a scroll-reactive radial glow, an eyebrow badge, a word-by-word reveal headline, and two contact actions (email and call) each pairing a… | `npx shadcn@latest add https://hirael.com/r/cta-05.json` |
| cta-06 | registry:block | CTA banner on one tokenized gradient surface: an eyebrow label, a serif headline with an italic emphasis, short sub-copy, and a primary action button that rise… | `npx shadcn@latest add https://hirael.com/r/cta-06.json` |
| footer-02 | registry:block | Rounded-top footer with a brand block beside a multi-column link grid. Each column caps at five links and shows a "View all" arrow when there are more. A soft … | `npx shadcn@latest add https://hirael.com/r/footer-02.json` |
| footer-03 | registry:block | Boxed link-column footer: a two-column brand block with wordmark, blurb, and ghost social buttons, two link columns, and a divided copyright row. Sits in a sof… | `npx shadcn@latest add https://hirael.com/r/footer-03.json` |
| footer-04 | registry:block | Four-column footer lit by slow light rays falling from the top edge: brand mark and blurb, a contact column with WhatsApp and email links, a location column, a… | `npx shadcn@latest add https://hirael.com/r/footer-04.json` |
| faq-05 | registry:block | Two-column FAQ block: an eyebrow, serif headline and short intro sit on the start side; a single-open accordion of five questions sits on the end side, split b… | `npx shadcn@latest add https://hirael.com/r/faq-05.json` |
| faq-06 | registry:block | Centered FAQ with a pill badge, a word-by-word headline reveal and a short intro above a multi-open accordion where each question is its own bordered card that… | `npx shadcn@latest add https://hirael.com/r/faq-06.json` |
| contact-02 | registry:block | Bordered contact section with a serif header and a three-column info grid: email with a copy button, location, and social pills. | `npx shadcn@latest add https://hirael.com/r/contact-02.json` |
| contact-03 | registry:block | Centered contact panel whose bottom glow widens as the section scrolls into view, with a pill badge, a word-by-word headline reveal, two short paragraphs, and … | `npx shadcn@latest add https://hirael.com/r/contact-03.json` |
| contact-04 | registry:block | Support contact section with a live reply-time line from fixed support hours, contact channels, common questions, and a ticket form that suggests help articles… | `npx shadcn@latest add https://hirael.com/r/contact-04.json` |
| login-03 | registry:block | Split-screen sign-in: a decorative animated-paths aside with a brand mark and a short quote, paired with a clean GitHub-only sign-in pane. A back-to-home link,… | `npx shadcn@latest add https://hirael.com/r/login-03.json` |
| toc | registry:component | On-this-page navigation that tracks the active heading as you scroll and highlights it with a moving border marker. Takes a flat or nested items list, or compo… | `npx shadcn@latest add https://hirael.com/r/toc.json` |
| app-shell-05 | registry:block | Inset sidebar app shell: a collapsible icon sidebar with a brand header, grouped Workspace and Tools nav (with a Beta badge), and an account menu in the footer… | `npx shadcn@latest add https://hirael.com/r/app-shell-05.json` |
| dashboard-06 | registry:block | Pipeline overview dashboard: four stat cards for success, failure, skipped, and live activity, a clickable latest-runs bar chart with a run breakdown panel, an… | `npx shadcn@latest add https://hirael.com/r/dashboard-06.json` |
| confirm | registry:component | Imperative confirmation dialog: a root provider plus a useConfirm hook that resolves a promise on confirm or cancel. Default or destructive tone, an optional i… | `npx shadcn@latest add https://hirael.com/r/confirm.json` |
| unsaved-guard | registry:component | Unsaved-changes guard: a root provider plus a useUnsavedGuard hook. Warns before reload, tab close and in-app link navigation, and returns a guard(proceed) to … | `npx shadcn@latest add https://hirael.com/r/unsaved-guard.json` |
| data-table | registry:component | TanStack-powered data table: faceted, text, range and date filters, sortable columns, column visibility, row selection and pagination, with page, sort and filt… | `npx shadcn@latest add https://hirael.com/r/data-table.json` |
| process-01 | registry:block | Team onboarding in three indexed steps (invite, connect tools, ship the first project), each with a warm hairline, a title, a body and a short detail line. | `npx shadcn@latest add https://hirael.com/r/process-01.json` |
| process-02 | registry:block | Four-step install section. Picking a step fills the connector up to it and swaps in a detail panel with a short checklist, and the section closes on a copyable… | `npx shadcn@latest add https://hirael.com/r/process-02.json` |
| feature-03 | registry:block | Bento explaining install: a lead tile with the shadcn add command and the files it writes, beside five indexed tiles on dependencies, aliases, npm packages, to… | `npx shadcn@latest add https://hirael.com/r/feature-03.json` |
| feature-04 | registry:block | Services grid: a pill badge, title and intro over a three-column set of cards, each with a large thin icon, title, blurb and a three-point bullet list, lit by … | `npx shadcn@latest add https://hirael.com/r/feature-04.json` |
| feature-05 | registry:block | Values section: a centered header over a two-column, offset grid of six glass cards, each backed by a static dot pattern in the brand warm tone, rising in with… | `npx shadcn@latest add https://hirael.com/r/feature-05.json` |
| feature-06 | registry:block | About section: a centered animated header over two equal story cards, each decorated with a fading SVG grid pattern and a token-lit gradient, with a heading an… | `npx shadcn@latest add https://hirael.com/r/feature-06.json` |
| comparison-01 | registry:block | Two-column us-and-them panel: a featured column of checked points beside a muted column of the usual trade-offs, split by a divider that stacks on mobile. | `npx shadcn@latest add https://hirael.com/r/comparison-01.json` |
| comparison-02 | registry:block | Three-column feature matrix with a highlighted middle column, mixed tick and text cells, and a call to action in the footer row. | `npx shadcn@latest add https://hirael.com/r/comparison-02.json` |
| comparison-03 | registry:block | Before and after panels side by side, the old way muted with crosses and the new way ticked, a Before/After switch on small screens, closing on an outcome stri… | `npx shadcn@latest add https://hirael.com/r/comparison-03.json` |
| comparison-04 | registry:block | Three-plan feature matrix with a sticky plan header, a column highlight that follows the pointer, a switch that hides rows where every plan is equal, and a sin… | `npx shadcn@latest add https://hirael.com/r/comparison-04.json` |
| newsletter-01 | registry:block | Centered subscribe panel with an inline email form, inline validation and a success state that swaps in a confirmation once a valid address is entered. | `npx shadcn@latest add https://hirael.com/r/newsletter-01.json` |
| newsletter-02 | registry:block | Waitlist form that validates the address, shows a brief loading state, then returns your place in line with an invite link to copy and the referral rewards it … | `npx shadcn@latest add https://hirael.com/r/newsletter-02.json` |
| careers-01 | registry:block | Open-roles list with department filter pills and rows that show title, department, location and type, each linking out with a hover arrow. | `npx shadcn@latest add https://hirael.com/r/careers-01.json` |
| careers-02 | registry:block | Single job posting with the role details, a numbered hiring process and a sticky apply form with CV upload, validation and a success state. On small screens a … | `npx shadcn@latest add https://hirael.com/r/careers-02.json` |
| hero-09 | registry:block | Full-viewport product hero on a rounded card that zooms out as the page scrolls: an inline nav with brand and actions, a serif headline, sub-copy, dual CTAs, a… | `npx shadcn@latest add https://hirael.com/r/hero-09.json` |
| feature-07 | registry:block | Problem-framing trio: a badge and serif headline with a muted second half above three cards, each an orb icon in concentric rings with a soft radial glow, a ti… | `npx shadcn@latest add https://hirael.com/r/feature-07.json` |
| feature-08 | registry:block | Six-card feature grid on hairline rails: each card carries an inline icon beside its title, a title and a description, corner crosshair marks, and a radial spo… | `npx shadcn@latest add https://hirael.com/r/feature-08.json` |
| feature-09 | registry:block | Selectable catalog bento on a hairline grid: step cells with a large faded icon, title and description; picking one shows its sample settings in a panel below.… | `npx shadcn@latest add https://hirael.com/r/feature-09.json` |
| feature-10 | registry:block | Mixed-cell overview bento: a quote with attribution, two metric tiles, a latest-drop card with a CardAction, and a three-job list, all on one hairline lattice. | `npx shadcn@latest add https://hirael.com/r/feature-10.json` |
| feature-11 | registry:block | Feature switcher for a shared inbox: a vertical tab list of three capabilities beside a panel previewing each one, from assigned conversations to saved replies… | `npx shadcn@latest add https://hirael.com/r/feature-11.json` |
| pricing-04 | registry:block | Three-tier pricing row with a monthly/yearly toggle, an uppercase plan label, a large price with billing note, a tagline, a full-width CTA and a check-marked q… | `npx shadcn@latest add https://hirael.com/r/pricing-04.json` |
| pricing-05 | registry:block | Usage pricing calculator with sliders for active users and build minutes, a priority support switch, and a live monthly estimate broken into line items with a … | `npx shadcn@latest add https://hirael.com/r/pricing-05.json` |
| faq-07 | registry:block | Split FAQ: a heading, lead and numbered topic index on the start side; picking a topic opens its answer in the single-open accordion on the end side. | `npx shadcn@latest add https://hirael.com/r/faq-07.json` |
| cta-07 | registry:block | Closing CTA panel wrapped in a scroll-reactive warm rim glow that widens as the section moves through the viewport, with an eyebrow badge, a two-tone serif hea… | `npx shadcn@latest add https://hirael.com/r/cta-07.json` |
| hero-10 | registry:block | Bordered hero card over a blurred full-bleed image: a rocket badge, a large centered headline, sub-copy and dual CTAs that rise into place on load. Reduced-mot… | `npx shadcn@latest add https://hirael.com/r/hero-10.json` |
| footer-06 | registry:block | Two-part footer: a bordered CTA panel over a rotated, blurred image with a headline, sub-copy and a wide sign-up button, above a brand block with social icons,… | `npx shadcn@latest add https://hirael.com/r/footer-06.json` |
| footer-05 | registry:block | Floating card footer inset from the page edge: a brand block with mark and tagline, three link columns, and a hairline-divided legal row with copyright and a s… | `npx shadcn@latest add https://hirael.com/r/footer-05.json` |
| status-01 | registry:block | Service status page: an operational banner with an inline check, a 90-day uptime grid of tooltip-backed day bars per service with a status legend, and a dated … | `npx shadcn@latest add https://hirael.com/r/status-01.json` |
| metric-card | registry:component | Compact metric card with a value and unit, a tone-aware sparkline and an up / down trend line. Compound API. | `npx shadcn@latest add https://hirael.com/r/metric-card.json` |
| yaml-editor | registry:component | Editable code field with dependency-free YAML syntax highlighting, a line-number gutter and tab-to-indent. Controlled or uncontrolled. | `npx shadcn@latest add https://hirael.com/r/yaml-editor.json` |
| server-card | registry:block | Fleet of host cards, each with a status pill, region, CPU / memory / disk specs and threshold-tinted usage meters. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/server-card.json` |
| vm-table | registry:block | Virtual-machine instance table with live status dots, size, region, IP and uptime. Self-contained parts, no table primitive required. | `npx shadcn@latest add https://hirael.com/r/vm-table.json` |
| k8s-pod-table | registry:block | Kubernetes pod table with phase pills (Running, Pending, CrashLoopBackOff), ready and restart counts that flag unhealthy pods. | `npx shadcn@latest add https://hirael.com/r/k8s-pod-table.json` |
| resource-status | registry:block | Statuspage-style panel: an overall banner over a list of resources, each with an operational / degraded / outage / maintenance state and uptime. | `npx shadcn@latest add https://hirael.com/r/resource-status.json` |
| cluster-map | registry:block | Grid heatmap of cluster nodes, each cell tinted by health and load with a hover label, plus a legend. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/cluster-map.json` |
| network-topology | registry:block | Coordinate-placed topology diagram: nodes with status and icons over an SVG edge layer, with animated active links. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/network-topology.json` |
| storage-browser | registry:block | Object-storage file browser with a clickable path breadcrumb, folder and file rows, sizes and modified dates, and a details row for the selected file. Ships co… | `npx shadcn@latest add https://hirael.com/r/storage-browser.json` |
| log-viewer | registry:block | Streaming log panel with severity-colored lines, timestamps and sources, a level filter with counts, and a Follow toggle that tails new lines and unpins when y… | `npx shadcn@latest add https://hirael.com/r/log-viewer.json` |
| terminal | registry:block | Terminal surface with a title bar, output lines and an interactive prompt input with command-history recall. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/terminal.json` |
| deployment-history | registry:block | Deployment feed on a connecting rail: version, environment and status (deployed, failed, building, rolled back) with commit and author meta. | `npx shadcn@latest add https://hirael.com/r/deployment-history.json` |
| kanban | registry:component | Board of columns and cards with pointer and keyboard drag-and-drop across columns, drop placeholder, empty-column hint and live-region announcements. No dnd-ki… | `npx shadcn@latest add https://hirael.com/r/kanban.json` |
| sparkline | registry:component | Tiny inline SVG chart in line, area or bar form with optional curve, last-point dot, reference line and hover tooltip. Tints with currentColor, no chart librar… | `npx shadcn@latest add https://hirael.com/r/sparkline.json` |
| json-viewer | registry:component | Collapsible JSON tree with typed value colors, item counts on closed nodes, long-string truncation, expand or collapse all, copy, and arrow-key navigation. | `npx shadcn@latest add https://hirael.com/r/json-viewer.json` |
| diff-viewer | registry:component | Line diff of two texts computed in-component with an LCS algorithm. Unified or split layout, +N / -N stats, context lines with expandable gaps. No deps. | `npx shadcn@latest add https://hirael.com/r/diff-viewer.json` |
| cron-editor | registry:component | Visual cron builder kept in sync with the raw expression. Presets, per-field modes, validation, a plain-English preview, and the next run times. | `npx shadcn@latest add https://hirael.com/r/cron-editor.json` |
| country-select | registry:component | Searchable country picker with flag emoji, pinned countries, optional dial codes, and single or multiple selection. Search by name or ISO code. | `npx shadcn@latest add https://hirael.com/r/country-select.json` |
| command-palette | registry:component | Keyboard-first command menu with a platform shortcut, nested pages, remembered recents and shortcut hints on each row. | `npx shadcn@latest add https://hirael.com/r/command-palette.json` |
| address-input | registry:component | Postal address field group that follows the selected country: which fields appear, the order they sit in, and what they are called. | `npx shadcn@latest add https://hirael.com/r/address-input.json` |
| credit-card-input | registry:component | Card number, expiry, and CVC in one row with brand detection, per-brand grouping, Luhn and expiry validation, and auto-advance between fields. | `npx shadcn@latest add https://hirael.com/r/credit-card-input.json` |
| emoji-picker | registry:component | Self-contained emoji grid with 560+ emoji in 8 categories, keyword search, recents, skin tones, and arrow-key navigation. No dependencies. | `npx shadcn@latest add https://hirael.com/r/emoji-picker.json` |
| avatar-upload | registry:component | Click or drop an image, crop it to a circle or square with zoom, and preview the result. Initials fallback, size and type limits, remove control. | `npx shadcn@latest add https://hirael.com/r/avatar-upload.json` |
| settings-01 | registry:block | Account settings page with a sticky section nav, card sections with label/control rows that stack on mobile, dirty-aware Save/Cancel footers, and a Danger zone… | `npx shadcn@latest add https://hirael.com/r/settings-01.json` |
| settings-02 | registry:block | Security and notifications settings in tabs: change password with strength meter, two-factor toggle, revocable session list, and grouped notification switches … | `npx shadcn@latest add https://hirael.com/r/settings-02.json` |
| members-01 | registry:block | Team members management: live search, inline role select, status badges, row actions menu, a pending-invites list with resend/revoke, and an invite dialog that… | `npx shadcn@latest add https://hirael.com/r/members-01.json` |
| onboarding-01 | registry:block | Four-step setup wizard on the Stepper: controlled or uncontrolled step, per-step validation gating Continue, Skip, Back, a Finish that fires onComplete, and a … | `npx shadcn@latest add https://hirael.com/r/onboarding-01.json` |
| two-factor-setup-01 | registry:block | Three-step 2FA enrollment card: scan a real otpauth QR or copy the key, confirm a six-digit code, then save recovery codes with copy, download and a checkbox-g… | `npx shadcn@latest add https://hirael.com/r/two-factor-setup-01.json` |
| coming-soon-01 | registry:block | Full-viewport launch page with a live countdown, an email notify form that shows an inline success state, and a GitHub link in the footer. Ships composable par… | `npx shadcn@latest add https://hirael.com/r/coming-soon-01.json` |
| coming-soon-02 | registry:block | Full-viewport launch teaser: a pill badge, a word-by-word serif headline, sub-copy and an email notify form with inline validation and a confirmation, above a … | `npx shadcn@latest add https://hirael.com/r/coming-soon-02.json` |
| maintenance-01 | registry:block | Scheduled maintenance page with a pulsing status dot, window card showing start, expected return and migration progress, a notify-me popover with email validat… | `npx shadcn@latest add https://hirael.com/r/maintenance-01.json` |
| maintenance-02 | registry:block | Full-viewport offline page with a blurred primary glow and a sparkle field behind a pill badge, a word-by-word serif headline, a short status message and a spi… | `npx shadcn@latest add https://hirael.com/r/maintenance-02.json` |
| error-01 | registry:block | 500 page with a retry action, home link, collapsible technical details (request id, timestamp, copy button) and a system status line. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/error-01.json` |
| team-01 | registry:block | Team section with a serif headline, a department filter, a grid of members with portraits or initials, roles, bios and GitHub links, and a hiring footer. Ships… | `npx shadcn@latest add https://hirael.com/r/team-01.json` |
| team-02 | registry:block | Single-profile experience section: a four-up metric strip, a bio card with a grid-pattern backdrop, and a competencies card that ends in three pause-on-hover m… | `npx shadcn@latest add https://hirael.com/r/team-02.json` |
| team-03 | registry:block | Distributed team directory grouped by department, showing each person’s live local time and whether they are inside working hours, with a department filter and… | `npx shadcn@latest add https://hirael.com/r/team-03.json` |
| stats-01 | registry:block | Metrics band with four large numbers that count up on scroll, labels, optional deltas, and a two-column header on large screens. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/stats-01.json` |
| stats-02 | registry:block | Four metric tiles with a 4w, 12w or 52w range toggle that swaps each figure, trend chip and sparkline; one metric trends the wrong way. | `npx shadcn@latest add https://hirael.com/r/stats-02.json` |
| stats-03 | registry:block | Split stats section: a short growth story on one side, four metrics tracked against their targets on the other. Bars fill from zero on load and a Quarter / Yea… | `npx shadcn@latest add https://hirael.com/r/stats-03.json` |
| cookie-consent | registry:block | Floating consent banner with per-category switches, accept, reject, and save actions, and a choice persisted in localStorage. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/cookie-consent.json` |
| changelog-01 | registry:block | Release notes with a sticky date rail, version badges, New / Improved / Fixed tags, a subscribe button, and a filter that narrows entries. Ships composable par… | `npx shadcn@latest add https://hirael.com/r/changelog-01.json` |
| changelog-02 | registry:block | Public roadmap board with Now, Next and Later columns. Every item can be upvoted, the board sorts by votes or by date, and on small screens tabs pick the colum… | `npx shadcn@latest add https://hirael.com/r/changelog-02.json` |
| env-editor | registry:block | Environment variables editor with masked secrets, copy, per-environment chips, .env import, key validation, and unsaved-change tracking. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/env-editor.json` |
| prompt-input | registry:block | Chat composer with an auto-growing textarea, Enter to send, attachments, a model picker, and a Stop button while streaming. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/prompt-input.json` |
| message-thread | registry:block | Message list that follows streaming output, with tool calls, reasoning, sources, hover actions, typing dots, and a streaming cursor. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/message-thread.json` |
| ai-chat-01 | registry:block | Full chat screen: grouped history sidebar that collapses to a sheet, top bar with model badge, streaming thread, and pinned composer. Ships composable parts. | `npx shadcn@latest add https://hirael.com/r/ai-chat-01.json` |
| accordion | registry:ui | Radix-powered accordion primitive used by the FAQ blocks. Plus icon rotates to an X on open. | `npx shadcn@latest add https://hirael.com/r/accordion.json` |
| compose-refs | registry:component | Fans one node out to several refs, so a part can keep its own internal ref while still forwarding the element to the consumer. | `npx shadcn@latest add https://hirael.com/r/compose-refs.json` |
| calendar-utils | registry:component | Dependency-free date helpers (month grids, day math, keyboard-grid navigation) shared by date-picker and date-range-picker. | `npx shadcn@latest add https://hirael.com/r/calendar-utils.json` |
| theme-emerald | registry:theme | Emerald accent preset for the hirael palette. Sets --primary, --primary-foreground and --ring for light and dark. | `npx shadcn@latest add https://hirael.com/r/theme-emerald.json` |

## For AI agents

```text
You are adding components from @hirael to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/hirael.md) for the component list.
2. Fetch the machine-readable index: https://hirael.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: hirael).
```