# Hirael

> The components shadcn/ui doesn't ship: React components, section blocks, and full-page templates distributed through the shadcn registry schema. Install any item with `npx shadcn@latest add https://hirael.com/r/<name>.json` (Radix UI) or `https://hirael.com/r/base/<name>.json` (Base UI); the source copies into the consumer's repo.

Every item below has a machine-readable registry JSON at `/r/<name>.json` (Radix UI) and `/r/base/<name>.json` (Base UI) containing its full source files, dependencies, and install targets, plus a Markdown version of its documentation page at `/r/<name>.md` (and `/r/base/<name>.md`) carrying the install command, usage, examples, full source, and API tables in one document. Human-facing pages embed live demos of each item.

## Components
- [Multi Select](https://hirael.com/components/inputs/multi-select): Chip-based multi-select with command-palette dropdown, search, select-all and async loader. Compound and single-prop APIs. Markdown: https://hirael.com/r/multi-select.md. Registry JSON: https://hirael.com/r/multi-select.json
- [Number Range](https://hirael.com/components/inputs/number-range): Two-thumb slider paired with synced number inputs. Min/max/step, currency or unit formatting, keyboard-first. Markdown: https://hirael.com/r/number-range.md. Registry JSON: https://hirael.com/r/number-range.json
- [Tag Input](https://hirael.com/components/inputs/tag-input): Chip input with paste-to-split, dedupe, validation hook, max tags. Compound and single-prop APIs. Markdown: https://hirael.com/r/tag-input.md. Registry JSON: https://hirael.com/r/tag-input.json
- [Combobox](https://hirael.com/components/inputs/combobox): Searchable select on Base UI: single or multiple selection, chips, grouped options, an input addon slot and a clear button. Markdown: https://hirael.com/r/combobox.md. Registry JSON: https://hirael.com/r/combobox.json
- [Lazy Select](https://hirael.com/components/inputs/lazy-select): Autocomplete single-select that defers loading until open and pages through results on scroll. Debounced server-side search with a pluggable lazy paginator hook. Markdown: https://hirael.com/r/lazy-select.md. Registry JSON: https://hirael.com/r/lazy-select.json
- [Password Input](https://hirael.com/components/inputs/password-input): Show/hide toggle with an optional pluggable strength meter. Compound and single-prop APIs. Markdown: https://hirael.com/r/password-input.md. Registry JSON: https://hirael.com/r/password-input.json
- [Currency Input](https://hirael.com/components/inputs/currency-input): Locale-aware grouping with currency-symbol prefix and configurable decimal precision. Markdown: https://hirael.com/r/currency-input.md. Registry JSON: https://hirael.com/r/currency-input.json
- [Phone Input](https://hirael.com/components/inputs/phone-input): Country dial-code dropdown with E.164 output. Compound and single-prop APIs. Markdown: https://hirael.com/r/phone-input.md. Registry JSON: https://hirael.com/r/phone-input.json
- [Rating](https://hirael.com/components/inputs/rating): Star rating with hover preview, half-star precision, read-only mode and sm / md / lg sizes. Markdown: https://hirael.com/r/rating.md. Registry JSON: https://hirael.com/r/rating.json
- [Mention Input](https://hirael.com/components/inputs/mention-input): @-mention textarea with caret-anchored autocomplete, highlighted mention chips, async search and multiple trigger characters. Markdown: https://hirael.com/r/mention-input.md. Registry JSON: https://hirael.com/r/mention-input.json
- [Rich Text Editor](https://hirael.com/components/inputs/rich-text-editor): Tiptap editor with a formatting toolbar (headings, lists, links, highlight, alignment) and a hover bubble to edit or unlink links inline. Outputs HTML, controlled or uncontrolled, with composable parts. Markdown: https://hirael.com/r/rich-text-editor.md. Registry JSON: https://hirael.com/r/rich-text-editor.json
- [Inline Edit](https://hirael.com/components/inputs/inline-edit): Click-to-edit text with preview, validation, async submit and confirm/cancel controls. Input and textarea modes. Markdown: https://hirael.com/r/inline-edit.md. Registry JSON: https://hirael.com/r/inline-edit.json
- [Signature Pad](https://hirael.com/components/inputs/signature-pad): Canvas signature capture with velocity-based ink, per-stroke undo, theme-aware re-inking and PNG/JPEG export via ref. Markdown: https://hirael.com/r/signature-pad.md. Registry JSON: https://hirael.com/r/signature-pad.json
- [YAML Editor](https://hirael.com/components/inputs/yaml-editor): Editable code field with dependency-free YAML syntax highlighting, a line-number gutter and tab-to-indent. Controlled or uncontrolled. Markdown: https://hirael.com/r/yaml-editor.md. Registry JSON: https://hirael.com/r/yaml-editor.json
- [Cron Editor](https://hirael.com/components/inputs/cron-editor): Visual cron builder kept in sync with the raw expression. Presets, per-field modes, validation, a plain-English preview, and the next run times. Markdown: https://hirael.com/r/cron-editor.md. Registry JSON: https://hirael.com/r/cron-editor.json
- [Country Select](https://hirael.com/components/inputs/country-select): Searchable country picker with flag emoji, pinned countries, optional dial codes, and single or multiple selection. Search by name or ISO code. Markdown: https://hirael.com/r/country-select.md. Registry JSON: https://hirael.com/r/country-select.json
- [Credit Card Input](https://hirael.com/components/inputs/credit-card-input): Card number, expiry, and CVC in one row with brand detection, per-brand grouping, Luhn and expiry validation, and auto-advance between fields. Markdown: https://hirael.com/r/credit-card-input.md. Registry JSON: https://hirael.com/r/credit-card-input.json
- [Year Picker](https://hirael.com/components/pickers/year-picker): Decade-grid year picker with keyboard nav, min/max bounds, single or range mode. Markdown: https://hirael.com/r/year-picker.md. Registry JSON: https://hirael.com/r/year-picker.json
- [Month Picker](https://hirael.com/components/pickers/month-picker): 4×3 month grid with year stepper, keyboard nav, min/max bounds, single or range mode. Markdown: https://hirael.com/r/month-picker.md. Registry JSON: https://hirael.com/r/month-picker.json
- [Time Picker](https://hirael.com/components/pickers/time-picker): Hour, minute and optional second scroll columns with 12/24h modes, step intervals and keyboard nav. Markdown: https://hirael.com/r/time-picker.md. Registry JSON: https://hirael.com/r/time-picker.json
- [Color Picker](https://hirael.com/components/pickers/color-picker): SV gradient + hue slider with HEX / RGB / HSL tabs, eyedropper (where supported) and recent swatches. Markdown: https://hirael.com/r/color-picker.md. Registry JSON: https://hirael.com/r/color-picker.json
- [Date Picker](https://hirael.com/components/pickers/date-picker): Single-date picker with month grid, keyboard nav, min/max bounds and disabled dates. Includes an inline DateCalendar, no date library. Markdown: https://hirael.com/r/date-picker.md. Registry JSON: https://hirael.com/r/date-picker.json
- [Date Range Picker](https://hirael.com/components/pickers/date-range-picker): Dual-month range picker with hover preview, presets, min/max bounds and keyboard nav. Includes an inline DateRangeCalendar, no date library. Markdown: https://hirael.com/r/date-range-picker.md. Registry JSON: https://hirael.com/r/date-range-picker.json
- [Emoji Picker](https://hirael.com/components/pickers/emoji-picker): Self-contained emoji grid with 560+ emoji in 8 categories, keyword search, recents, skin tones, and arrow-key navigation. No dependencies. Markdown: https://hirael.com/r/emoji-picker.md. Registry JSON: https://hirael.com/r/emoji-picker.json
- [File Dropzone](https://hirael.com/components/files/file-dropzone): Drag-drop + click upload zone with previews, accept and max-size validation. Compound and single-prop APIs. Markdown: https://hirael.com/r/file-dropzone.md. Registry JSON: https://hirael.com/r/file-dropzone.json
- [Image Cropper](https://hirael.com/components/files/image-cropper): Pan-and-zoom image cropper with rect or round mask, fixed aspect frame, pinch / wheel / keyboard control and canvas export via ref. Markdown: https://hirael.com/r/image-cropper.md. Registry JSON: https://hirael.com/r/image-cropper.json
- [Media Input](https://hirael.com/components/files/media-input): Local media file picker that previews via an object URL; empty-state prompt, replace and clear, size validation. Nothing leaves the browser. Markdown: https://hirael.com/r/media-input.md. Registry JSON: https://hirael.com/r/media-input.json
- [Avatar Upload](https://hirael.com/components/files/avatar-upload): 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. Markdown: https://hirael.com/r/avatar-upload.md. Registry JSON: https://hirael.com/r/avatar-upload.json
- [Stat Card](https://hirael.com/components/data/stat-card): Compact metric card with label, value, and an up/down/flat trend chip. Compound and single-prop APIs. Markdown: https://hirael.com/r/stat-card.md. Registry JSON: https://hirael.com/r/stat-card.json
- [Timeline](https://hirael.com/components/data/timeline): Vertical event timeline with default or icon dots, tone variants and labelled time / title / description parts. Markdown: https://hirael.com/r/timeline.md. Registry JSON: https://hirael.com/r/timeline.json
- [Avatar Stack](https://hirael.com/components/data/avatar-stack): 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/overflow so each avatar can render as a link or button. Markdown: https://hirael.com/r/avatar-stack.md. Registry JSON: https://hirael.com/r/avatar-stack.json
- [Tree View](https://hirael.com/components/data/tree-view): Collapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus. Markdown: https://hirael.com/r/tree-view.md. Registry JSON: https://hirael.com/r/tree-view.json
- [Animated Number](https://hirael.com/components/data/animated-number): Count-up number that tweens to its target with easing, Intl formatting (currency, compact, percent), prefix/suffix and reduced-motion support. Markdown: https://hirael.com/r/animated-number.md. Registry JSON: https://hirael.com/r/animated-number.json
- [Sortable](https://hirael.com/components/data/sortable): Drag-to-reorder list with pointer and keyboard sorting, handle or whole-item dragging, and live-region announcements. No dnd-kit. Markdown: https://hirael.com/r/sortable.md. Registry JSON: https://hirael.com/r/sortable.json
- [Countdown Timer](https://hirael.com/components/data/countdown-timer): Count-down-to-date timer with boxed / inline / minimal variants, a useCountdown hook, digit animation and completion content. Markdown: https://hirael.com/r/countdown-timer.md. Registry JSON: https://hirael.com/r/countdown-timer.json
- [Calendar Heatmap](https://hirael.com/components/data/calendar-heatmap): GitHub-style contribution heatmap with month and weekday labels, tooltips, configurable intensity scale and a legend. Markdown: https://hirael.com/r/calendar-heatmap.md. Registry JSON: https://hirael.com/r/calendar-heatmap.json
- [Data Table](https://hirael.com/components/data/data-table): TanStack-powered data table: faceted, text, range and date filters, sortable columns, column visibility, row selection and pagination, with page, sort and filters kept in the URL. One useDataTable hook drives it: pass pageCount to query server-side, or omit it to sort, filter and page a local array in memory. Ships as a folder of composable parts. Markdown: https://hirael.com/r/data-table.md. Registry JSON: https://hirael.com/r/data-table.json
- [Metric Card](https://hirael.com/components/data/metric-card): Compact metric card with a value and unit, a tone-aware sparkline and an up / down trend line. Compound API. Markdown: https://hirael.com/r/metric-card.md. Registry JSON: https://hirael.com/r/metric-card.json
- [Kanban](https://hirael.com/components/data/kanban): 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-kit. Markdown: https://hirael.com/r/kanban.md. Registry JSON: https://hirael.com/r/kanban.json
- [Sparkline](https://hirael.com/components/data/sparkline): 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 library. Markdown: https://hirael.com/r/sparkline.md. Registry JSON: https://hirael.com/r/sparkline.json
- [Kbd](https://hirael.com/components/display/kbd): 3D tactile keycap with hover lift and pressed states. Compound API with KbdGroup for chords and KbdDisplay for inline keys. Markdown: https://hirael.com/r/kbd.md. Registry JSON: https://hirael.com/r/kbd.json
- [Callout](https://hirael.com/components/display/callout): MDX-style admonition with info / success / warning / error / neutral variants and optional icon override. Ships --info / --success / --warning theme tokens. Markdown: https://hirael.com/r/callout.md. Registry JSON: https://hirael.com/r/callout.json
- [Scroll Progress](https://hirael.com/components/display/scroll-progress): Fixed reading progress bar. Tracks document scroll by default or a scoped container ref. Markdown: https://hirael.com/r/scroll-progress.md. Registry JSON: https://hirael.com/r/scroll-progress.json
- [Announcement Bar](https://hirael.com/components/display/announcement-bar): Top-of-page banner with default / primary / muted tones, optional dismiss button and localStorage persistence. Markdown: https://hirael.com/r/announcement-bar.md. Registry JSON: https://hirael.com/r/announcement-bar.json
- [Spinner](https://hirael.com/components/display/spinner): Loading indicator with circle, dots and bars variants, sm / md / lg sizes. Inherits the current text color and ships an accessible status label. Markdown: https://hirael.com/r/spinner.md. Registry JSON: https://hirael.com/r/spinner.json
- [Copy Button](https://hirael.com/components/display/copy-button): Click-to-copy button with copied feedback, icon-only or labelled, ghost / outline variants and a non-secure-context clipboard fallback. Markdown: https://hirael.com/r/copy-button.md. Registry JSON: https://hirael.com/r/copy-button.json
- [Icon Stack](https://hirael.com/components/display/icon-stack): 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 from the surrounding text. Markdown: https://hirael.com/r/icon-stack.md. Registry JSON: https://hirael.com/r/icon-stack.json
- [Marquee](https://hirael.com/components/display/marquee): Infinite scrolling row or column for logos and testimonials, with pause-on-hover, reverse and vertical modes. Keyframes ship inline, zero config. Markdown: https://hirael.com/r/marquee.md. Registry JSON: https://hirael.com/r/marquee.json
- [Image Compare](https://hirael.com/components/display/image-compare): Before/after comparison slider with a draggable, keyboard-accessible divider, horizontal or vertical orientation and hover-follow mode. Markdown: https://hirael.com/r/image-compare.md. Registry JSON: https://hirael.com/r/image-compare.json
- [Lightbox](https://hirael.com/components/display/lightbox): Fullscreen image lightbox on Radix Dialog with gallery navigation, zoom and pan, swipe gestures, captions and a thumbnail strip. Markdown: https://hirael.com/r/lightbox.md. Registry JSON: https://hirael.com/r/lightbox.json
- [QR Code](https://hirael.com/components/display/qr-code): Dependency-free QR code generator rendering crisp SVG, with L/M/Q/H error correction, quiet-zone control and currentColor theming. Markdown: https://hirael.com/r/qr-code.md. Registry JSON: https://hirael.com/r/qr-code.json
- [Code Block](https://hirael.com/components/display/code-block): Code display with built-in dependency-free syntax highlighting via theme tokens, line numbers, line highlights, diff gutters, copy button and collapsible max-height. Markdown: https://hirael.com/r/code-block.md. Registry JSON: https://hirael.com/r/code-block.json
- [Masonry](https://hirael.com/components/display/masonry): True masonry layout that balances children into the shortest column by measured height, order-preserving, responsive, dependency-free. Markdown: https://hirael.com/r/masonry.md. Registry JSON: https://hirael.com/r/masonry.json
- [Audio Player](https://hirael.com/components/display/audio-player): Composable audio player with play/pause, scrub-safe seek with buffered tint, skip, time readouts, volume and playback rate. Markdown: https://hirael.com/r/audio-player.md. Registry JSON: https://hirael.com/r/audio-player.json
- [Confirm](https://hirael.com/components/display/confirm): Imperative confirmation dialog: a root provider plus a useConfirm hook that resolves a promise on confirm or cancel. Default or destructive tone, an optional icon, and an async confirm action with a pending spinner. Markdown: https://hirael.com/r/confirm.md. Registry JSON: https://hirael.com/r/confirm.json
- [Unsaved Guard](https://hirael.com/components/display/unsaved-guard): 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 wrap programmatic navigation in a confirm dialog. Markdown: https://hirael.com/r/unsaved-guard.md. Registry JSON: https://hirael.com/r/unsaved-guard.json
- [JSON Viewer](https://hirael.com/components/display/json-viewer): Collapsible JSON tree with typed value colors, item counts on closed nodes, long-string truncation, expand or collapse all, copy, and arrow-key navigation. Markdown: https://hirael.com/r/json-viewer.md. Registry JSON: https://hirael.com/r/json-viewer.json
- [Diff Viewer](https://hirael.com/components/display/diff-viewer): 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. Markdown: https://hirael.com/r/diff-viewer.md. Registry JSON: https://hirael.com/r/diff-viewer.json
- [Blur Reveal](https://hirael.com/components/animation/blur-reveal): Reveals content with a blur, fade and lift as it scrolls into view. Configurable delay, duration and threshold; respects reduced-motion. Markdown: https://hirael.com/r/blur-reveal.md. Registry JSON: https://hirael.com/r/blur-reveal.json
- [Text Reveal](https://hirael.com/components/animation/text-reveal): Staggered text entrance that masks and slides each word, character or line into place on scroll. Respects reduced-motion. Markdown: https://hirael.com/r/text-reveal.md. Registry JSON: https://hirael.com/r/text-reveal.json
- [Scroll Reveal](https://hirael.com/components/animation/scroll-reveal): Fades and slides content in from any direction as it enters the viewport. Configurable distance, delay and replay; respects reduced-motion. Markdown: https://hirael.com/r/scroll-reveal.md. Registry JSON: https://hirael.com/r/scroll-reveal.json
- [Spotlight Card](https://hirael.com/components/animation/spotlight-card): Card surface with a soft spotlight that tracks the cursor and fades in on hover. Built on design tokens, no hard-coded colors. Markdown: https://hirael.com/r/spotlight-card.md. Registry JSON: https://hirael.com/r/spotlight-card.json
- [Magnetic Button](https://hirael.com/components/animation/magnetic-button): Button that pulls toward the cursor and springs back on leave. Adjustable strength, asChild to wrap a link, respects reduced-motion. Markdown: https://hirael.com/r/magnetic-button.md. Registry JSON: https://hirael.com/r/magnetic-button.json
- [Cursor Glow](https://hirael.com/components/animation/cursor-glow): Ambient glow layer that follows the pointer across its container and fades when it leaves. Drop it behind heroes, grids or feature panels. Markdown: https://hirael.com/r/cursor-glow.md. Registry JSON: https://hirael.com/r/cursor-glow.json
- [Sparkles](https://hirael.com/components/animation/sparkles): Canvas particle field that drifts and twinkles behind any container. Density scales with size, colors resolve from tokens, and it pauses offscreen and under reduced-motion. No dependencies. Markdown: https://hirael.com/r/sparkles.md. Registry JSON: https://hirael.com/r/sparkles.json
- [Tilt Card](https://hirael.com/components/animation/tilt-card): 3D pointer tilt with optional cursor-following glare and configurable max angle, scale and perspective. Respects reduced-motion. Markdown: https://hirael.com/r/tilt-card.md. Registry JSON: https://hirael.com/r/tilt-card.json
- [Morphing Dialog](https://hirael.com/components/animation/morphing-dialog): 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. Markdown: https://hirael.com/r/morphing-dialog.md. Registry JSON: https://hirael.com/r/morphing-dialog.json
- [Stepper](https://hirael.com/components/navigation/stepper): Multi-step progress indicator with horizontal and vertical orientation, completed / active / inactive states, clickable steps and a compound API. Markdown: https://hirael.com/r/stepper.md. Registry JSON: https://hirael.com/r/stepper.json
- [Tour](https://hirael.com/components/navigation/tour): Onboarding spotlight that dims the page around a target element and walks users through steps with a positioned coach-mark card. Markdown: https://hirael.com/r/tour.md. Registry JSON: https://hirael.com/r/tour.json
- [Dock](https://hirael.com/components/navigation/dock): macOS-style dock with cursor magnification: icons scale and spring as the pointer passes, with hover and focus labels. Built on motion. Markdown: https://hirael.com/r/dock.md. Registry JSON: https://hirael.com/r/dock.json
- [Floating Action Button](https://hirael.com/components/navigation/floating-action-button): Expanding speed-dial FAB: a primary trigger that rotates open to stagger a stack of secondary actions on any side. Compound API. Markdown: https://hirael.com/r/floating-action-button.md. Registry JSON: https://hirael.com/r/floating-action-button.json
- [Floating Toolbar](https://hirael.com/components/navigation/floating-toolbar): Floating pill toolbar for text selection and canvas actions, with toggle buttons, separators and labels. Position it anywhere. Markdown: https://hirael.com/r/floating-toolbar.md. Registry JSON: https://hirael.com/r/floating-toolbar.json
- [Split View](https://hirael.com/components/navigation/split-view): Two-pane master/detail layout with a draggable divider, keyboard resize, min/max bounds and horizontal or vertical orientation. RTL-aware. Markdown: https://hirael.com/r/split-view.md. Registry JSON: https://hirael.com/r/split-view.json
- [Resizable Panels](https://hirael.com/components/navigation/resizable-panels): Composable resizable panel groups with draggable, keyboard-accessible handles, per-panel minimums and nestable horizontal or vertical groups. RTL-aware. Markdown: https://hirael.com/r/resizable-panels.md. Registry JSON: https://hirael.com/r/resizable-panels.json
- [Table of Contents](https://hirael.com/components/navigation/toc): 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 composes from parts. Smooth scroll respects reduced-motion. Markdown: https://hirael.com/r/toc.md. Registry JSON: https://hirael.com/r/toc.json

## Blocks
- [Hero 1](https://hirael.com/blocks/hero/hero-01): Hero sections 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. Markdown: https://hirael.com/r/hero-01.md. Registry JSON: https://hirael.com/r/hero-01.json
- [Hero 2](https://hirael.com/blocks/hero/hero-02): Hero sections block. Centered hero over animated grayscale gradient bars, with a live pill, a serif headline with an underlined accent, dual CTA and a wordmark strip. Markdown: https://hirael.com/r/hero-02.md. Registry JSON: https://hirael.com/r/hero-02.json
- [Hero 3](https://hirael.com/blocks/hero/hero-03): Hero sections block. Editorial centered hero on a faded grid, with a serif headline, sub-copy, dual CTA and a logo cloud of customer wordmarks. Markdown: https://hirael.com/r/hero-03.md. Registry JSON: https://hirael.com/r/hero-03.json
- [Hero 4](https://hirael.com/blocks/hero/hero-04): Hero sections block. Full-bleed image-banner hero with a dark scrim, a slim nav, a serif headline and dual CTA aligned to the bottom. Markdown: https://hirael.com/r/hero-04.md. Registry JSON: https://hirael.com/r/hero-04.json
- [Hero 5](https://hirael.com/blocks/hero/hero-05): Hero sections block. Full-bleed hero card over an animated aurora shader, with a glass pill nav, a glass content panel, a serif headline, dual CTA and an avatar social-proof row. Markdown: https://hirael.com/r/hero-05.md. Registry JSON: https://hirael.com/r/hero-05.json
- [Hero 6](https://hirael.com/blocks/hero/hero-06): Hero sections 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 dividers, dual rounded CTAs, and a tooltip-backed core-stack icon row framed by gradient rules. Rotated geometric border accents fade in behind it (and stay still under reduced motion). Markdown: https://hirael.com/r/hero-06.md. Registry JSON: https://hirael.com/r/hero-06.json
- [Hero 7](https://hirael.com/blocks/hero/hero-07): Hero sections 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 top, bottom, and both sides of the section. Respects reduced-motion. Markdown: https://hirael.com/r/hero-07.md. Registry JSON: https://hirael.com/r/hero-07.json
- [Hero 8](https://hirael.com/blocks/hero/hero-08): Hero sections block. Centered hero on a framed, token-lit panel: a pill badge eyebrow, a serif headline with an italic emphasis span, sub-copy, dual CTA buttons, and a faux app-window preview below. Headline, sub-copy, and CTAs fade and rise in with staggered motion that respects reduced-motion. Markdown: https://hirael.com/r/hero-08.md. Registry JSON: https://hirael.com/r/hero-08.json
- [Hero 9](https://hirael.com/blocks/hero/hero-09): Hero sections 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 step-type strip, a drifting WebGL gradient mixed from the theme tokens, a bouncing scroll cue and a carved stat corner. Reduced-motion aware. Markdown: https://hirael.com/r/hero-09.md. Registry JSON: https://hirael.com/r/hero-09.json
- [Hero 10](https://hirael.com/blocks/hero/hero-10): Hero sections 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-motion aware. Markdown: https://hirael.com/r/hero-10.md. Registry JSON: https://hirael.com/r/hero-10.json
- [Feature 1](https://hirael.com/blocks/features/feature-01): Features block. Three alternating feature rows, each pairing a stylized Tailwind-only mock UI with a copy column (eyebrow, headline, paragraph, 3-item checklist). Markdown: https://hirael.com/r/feature-01.md. Registry JSON: https://hirael.com/r/feature-01.json
- [Feature 2](https://hirael.com/blocks/features/feature-02): Features block. Section header above a 3-column, 2-row grid of bordered feature cards with lucide icons, headlines and short blurbs. Markdown: https://hirael.com/r/feature-02.md. Registry JSON: https://hirael.com/r/feature-02.json
- [Feature 3](https://hirael.com/blocks/features/feature-03): Features block. Bento feature grid: a large lead tile with a faux file-tree preview beside five smaller token-lit tiles, each with an icon, title and short blurb. Markdown: https://hirael.com/r/feature-03.md. Registry JSON: https://hirael.com/r/feature-03.json
- [Feature 4](https://hirael.com/blocks/features/feature-04): Features block. Services grid: a pill badge, word-by-word animated 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 two pulsing warm radial glows. Cards rise in with staggered motion that respects reduced-motion. Markdown: https://hirael.com/r/feature-04.md. Registry JSON: https://hirael.com/r/feature-04.json
- [Feature 5](https://hirael.com/blocks/features/feature-05): Features block. Values section: a centered animated header over a two-column, offset grid of six glass cards, each backed by a canvas dot grid that shimmers dot by dot in the brand warm tone. Pauses off-screen and renders a single static frame under reduced-motion. Markdown: https://hirael.com/r/feature-05.md. Registry JSON: https://hirael.com/r/feature-05.json
- [Feature 6](https://hirael.com/blocks/features/feature-06): Features 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 and two paragraphs that rise in after the card. Reduced-motion renders everything in place. Markdown: https://hirael.com/r/feature-06.md. Registry JSON: https://hirael.com/r/feature-06.json
- [Feature 7](https://hirael.com/blocks/features/feature-07): Features 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 title and a short description. Cards fade up in sequence, stilled under reduced motion. Markdown: https://hirael.com/r/feature-07.md. Registry JSON: https://hirael.com/r/feature-07.json
- [Feature 8](https://hirael.com/blocks/features/feature-08): Features block. Six-card feature grid on hairline rails: each card carries an icon tile, a title and a description, corner crosshair marks, and a radial spotlight that follows the pointer on hover. Warm-tinted top glow per card. Markdown: https://hirael.com/r/feature-08.md. Registry JSON: https://hirael.com/r/feature-08.json
- [Feature 9](https://hirael.com/blocks/features/feature-09): Features block. Catalog bento on a hairline grid: a wide opening cell, four single cells and a full-width closing cell, each with a large faded icon that warms on hover, a title, a clamped description and a crosshair frame that clips at the cell edge. Markdown: https://hirael.com/r/feature-09.md. Registry JSON: https://hirael.com/r/feature-09.json
- [Process 1](https://hirael.com/blocks/process/process-01): How it works block. How-it-works section with a three-step row: each step pairs an icon badge, a Step NN label, a title and a short body, joined by a hairline connector on desktop. Markdown: https://hirael.com/r/process-01.md. Registry JSON: https://hirael.com/r/process-01.json
- [Pricing 1](https://hirael.com/blocks/pricing/pricing-01): Pricing block. Three-tier card row with a featured middle plan. Each card lists price, blurb, feature checklist and a primary or outline CTA. Markdown: https://hirael.com/r/pricing-01.md. Registry JSON: https://hirael.com/r/pricing-01.json
- [Pricing 2](https://hirael.com/blocks/pricing/pricing-02): Pricing block. Compare-by-feature pricing table with sticky tier header (tier name, price, CTA) and ~8 feature rows below. Markdown: https://hirael.com/r/pricing-02.md. Registry JSON: https://hirael.com/r/pricing-02.json
- [Pricing 3](https://hirael.com/blocks/pricing/pricing-03): Pricing 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. Markdown: https://hirael.com/r/pricing-03.md. Registry JSON: https://hirael.com/r/pricing-03.json
- [Pricing 4](https://hirael.com/blocks/pricing/pricing-04): Pricing block. Three-tier pricing row with an uppercase plan label, a large price, a tagline, a full-width CTA and a check-marked quota list per tier; the featured tier gets a warm border, a top radial glow and a most-popular badge. Markdown: https://hirael.com/r/pricing-04.md. Registry JSON: https://hirael.com/r/pricing-04.json
- [Comparison 1](https://hirael.com/blocks/comparison/comparison-01): Comparison 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. Markdown: https://hirael.com/r/comparison-01.md. Registry JSON: https://hirael.com/r/comparison-01.json
- [Team 1](https://hirael.com/blocks/team/team-01): Team block. Team section with serif headline, a bordered grid of members with initials placeholders, roles, bios, GitHub links, and a hiring footer. Ships composable parts. Markdown: https://hirael.com/r/team-01.md. Registry JSON: https://hirael.com/r/team-01.json
- [Team 2](https://hirael.com/blocks/team/team-02): Team 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 marquee rows of skill chips with edge fades. Every element rises in on scroll and respects reduced-motion. Markdown: https://hirael.com/r/team-02.md. Registry JSON: https://hirael.com/r/team-02.json
- [Stats 1](https://hirael.com/blocks/stats/stats-01): Stats 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. Markdown: https://hirael.com/r/stats-01.md. Registry JSON: https://hirael.com/r/stats-01.json
- [Testimonial 1](https://hirael.com/blocks/testimonials/testimonial-01): Testimonials block. Centered single quote with stylized open-mark, author block (avatar, name, role, company) and a muted wordmark row below. Markdown: https://hirael.com/r/testimonial-01.md. Registry JSON: https://hirael.com/r/testimonial-01.json
- [Testimonial 2](https://hirael.com/blocks/testimonials/testimonial-02): Testimonials block. Masonry quote grid (CSS columns) with ~6 bordered quote cards of varying length and author rows. Markdown: https://hirael.com/r/testimonial-02.md. Registry JSON: https://hirael.com/r/testimonial-02.json
- [Testimonial 3](https://hirael.com/blocks/testimonials/testimonial-03): Testimonials block. Centered statement quote with a serif display heading, an inline quote glyph in the corner, gradient hairline dividers, and a highlighted phrase, closed by a small mono attribution line. Markdown: https://hirael.com/r/testimonial-03.md. Registry JSON: https://hirael.com/r/testimonial-03.json
- [Testimonial 4](https://hirael.com/blocks/testimonials/testimonial-04): Testimonials block. Three-column quote grid under a centered pill badge and word-by-word headline. Each card opens with a quote icon inside a ring lit by an orbiting glow, then the quote in serif marks and an author line. Cards rise in with staggered motion. Markdown: https://hirael.com/r/testimonial-04.md. Registry JSON: https://hirael.com/r/testimonial-04.json
- [CTA 1](https://hirael.com/blocks/cta/cta-01): Call-to-action block. Framed CTA card with corner marks, headline + sub-copy on the left, dual buttons stacked on the right. Markdown: https://hirael.com/r/cta-01.md. Registry JSON: https://hirael.com/r/cta-01.json
- [CTA 2](https://hirael.com/blocks/cta/cta-02): Call-to-action block. Full-bleed centered CTA with framing top/bottom rules, highlight underlay on the key word, and an inline install command. Markdown: https://hirael.com/r/cta-02.md. Registry JSON: https://hirael.com/r/cta-02.json
- [CTA 3](https://hirael.com/blocks/cta/cta-03): Call-to-action block. Full-bleed CTA card with an animated dithered shader backdrop, a live status pill, a serif headline and a pill action button. Markdown: https://hirael.com/r/cta-03.md. Registry JSON: https://hirael.com/r/cta-03.json
- [CTA 4](https://hirael.com/blocks/cta/cta-04): Call-to-action block. Centered "get in touch" CTA with a mono eyebrow, serif headline, mail button, a direct-contact line, and a row of outline social icon buttons, capped by a soft radial glow dome with a starfield speckle. Markdown: https://hirael.com/r/cta-04.md. Registry JSON: https://hirael.com/r/cta-04.json
- [CTA 5](https://hirael.com/blocks/cta/cta-05): Call-to-action 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 button with its detail line. Markdown: https://hirael.com/r/cta-05.md. Registry JSON: https://hirael.com/r/cta-05.json
- [CTA 6](https://hirael.com/blocks/cta/cta-06): Call-to-action block. Framed CTA banner over a tokenized gradient surface: an eyebrow label, a serif headline with an italic emphasis, short sub-copy, and a primary action button with a motion reveal. Markdown: https://hirael.com/r/cta-06.md. Registry JSON: https://hirael.com/r/cta-06.json
- [CTA 7](https://hirael.com/blocks/cta/cta-07): Call-to-action 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 headline, sub-copy and dual CTAs. Static glow under reduced motion. Markdown: https://hirael.com/r/cta-07.md. Registry JSON: https://hirael.com/r/cta-07.json
- [Newsletter 1](https://hirael.com/blocks/newsletter/newsletter-01): Newsletter 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. Markdown: https://hirael.com/r/newsletter-01.md. Registry JSON: https://hirael.com/r/newsletter-01.json
- [FAQ 1](https://hirael.com/blocks/faqs/faq-01): FAQ block. Two-column FAQ: sticky heading + contact card on the left, numbered accordion on the right. Markdown: https://hirael.com/r/faq-01.md. Registry JSON: https://hirael.com/r/faq-01.json
- [FAQ 2](https://hirael.com/blocks/faqs/faq-02): FAQ block. Centered heading with two-column accordion grid below. Each row tagged with a Qn index. Markdown: https://hirael.com/r/faq-02.md. Registry JSON: https://hirael.com/r/faq-02.json
- [FAQ 3](https://hirael.com/blocks/faqs/faq-03): FAQ block. Searchable FAQ with category tabs, a live-filtered accordion, an empty state for missed queries and a support CTA strip. Markdown: https://hirael.com/r/faq-03.md. Registry JSON: https://hirael.com/r/faq-03.json
- [FAQ 4](https://hirael.com/blocks/faqs/faq-04): FAQ block. Framed single-column FAQ with side rules, a centered display header, five topic groups each pairing a heading with its own accordion, and a support footer line. Markdown: https://hirael.com/r/faq-04.md. Registry JSON: https://hirael.com/r/faq-04.json
- [FAQ 5](https://hirael.com/blocks/faqs/faq-05): FAQ block. Two-column FAQ block: a mono eyebrow, serif headline and short intro sit on the start side; a single-open accordion of five questions sits on the end side, split by a vertical divider that collapses to a stacked layout on mobile. Markdown: https://hirael.com/r/faq-05.md. Registry JSON: https://hirael.com/r/faq-05.json
- [FAQ 6](https://hirael.com/blocks/faqs/faq-06): FAQ 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 rises in with a staggered delay and tints slightly when open. Ships composable parts. Markdown: https://hirael.com/r/faq-06.md. Registry JSON: https://hirael.com/r/faq-06.json
- [FAQ 7](https://hirael.com/blocks/faqs/faq-07): FAQ block. Split FAQ: a serif heading and lead on the start side, a single-open accordion of five questions on the end side, divided by a hairline rule and framed by section borders. Markdown: https://hirael.com/r/faq-07.md. Registry JSON: https://hirael.com/r/faq-07.json
- [Login 1](https://hirael.com/blocks/auth/login-01): Auth block. Centered login card with monogram, email + password (using the password-input component), remember-me, divider and GitHub / Google providers. Markdown: https://hirael.com/r/login-01.md. Registry JSON: https://hirael.com/r/login-01.json
- [Login 2](https://hirael.com/blocks/auth/login-02): Auth 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. Markdown: https://hirael.com/r/login-02.md. Registry JSON: https://hirael.com/r/login-02.json
- [Signup 1](https://hirael.com/blocks/auth/signup-01): Auth block. Centered signup card with monogram, name + email, strength-meter password-input, terms checkbox, divider and GitHub / Google providers. Validates inline on submit. Markdown: https://hirael.com/r/signup-01.md. Registry JSON: https://hirael.com/r/signup-01.json
- [Forgot Password 1](https://hirael.com/blocks/auth/forgot-password-01): Auth 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 back-to-sign-in links. Markdown: https://hirael.com/r/forgot-password-01.md. Registry JSON: https://hirael.com/r/forgot-password-01.json
- [OTP Verify 1](https://hirael.com/blocks/auth/otp-verify-01): Auth block. Centered verification card with a six-box code input built in the block: auto-advance, backspace, paste distribution and arrow-key focus, plus a 30s resend countdown and a pending → success verify flow. Markdown: https://hirael.com/r/otp-verify-01.md. Registry JSON: https://hirael.com/r/otp-verify-01.json
- [Login 3](https://hirael.com/blocks/auth/login-03): Auth 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, mobile-collapsing layout, and token-based radial glows behind the form. Markdown: https://hirael.com/r/login-03.md. Registry JSON: https://hirael.com/r/login-03.json
- [Two-Factor Setup 1](https://hirael.com/blocks/auth/two-factor-setup-01): Auth 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-gated finish. Ships composable parts. Markdown: https://hirael.com/r/two-factor-setup-01.md. Registry JSON: https://hirael.com/r/two-factor-setup-01.json
- [Header 1](https://hirael.com/blocks/header/header-01): Headers block. Sticky top nav with brand monogram, centered anchor links, dual auth CTAs and a slide-down mobile menu. Markdown: https://hirael.com/r/header-01.md. Registry JSON: https://hirael.com/r/header-01.json
- [Header 2](https://hirael.com/blocks/header/header-02): Headers 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 share a sliding hover highlight; on mobile a toggle opens an animated dropdown menu. Ships composable parts and a scroll-container prop for embedded layouts. Markdown: https://hirael.com/r/header-02.md. Registry JSON: https://hirael.com/r/header-02.json
- [Footer 1](https://hirael.com/blocks/footer/footer-01): Footers block. Brand + tagline column alongside Product / Company / Resources link columns, with a copyright row and social icons below a thin rule. Markdown: https://hirael.com/r/footer-01.md. Registry JSON: https://hirael.com/r/footer-01.json
- [Footer 2](https://hirael.com/blocks/footer/footer-02): Footers 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 radial tint sits behind the top edge, and a bottom meta row carries the copyright and secondary links. Markdown: https://hirael.com/r/footer-02.md. Registry JSON: https://hirael.com/r/footer-02.json
- [Footer 3](https://hirael.com/blocks/footer/footer-03): Footers 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 soft outlined panel. Markdown: https://hirael.com/r/footer-03.md. Registry JSON: https://hirael.com/r/footer-03.json
- [Footer 4](https://hirael.com/blocks/footer/footer-04): Footers 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, and a subscribe form whose placeholder cycles through prompts. Columns and links rise in with staggered motion; a divided copyright row closes it. Rays hold still under reduced-motion. Markdown: https://hirael.com/r/footer-04.md. Registry JSON: https://hirael.com/r/footer-04.json
- [Footer 6](https://hirael.com/blocks/footer/footer-06): Footers 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, two link columns and a hairline copyright row. Markdown: https://hirael.com/r/footer-06.md. Registry JSON: https://hirael.com/r/footer-06.json
- [Footer 5](https://hirael.com/blocks/footer/footer-05): Footers 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 sign-off line. Markdown: https://hirael.com/r/footer-05.md. Registry JSON: https://hirael.com/r/footer-05.json
- [Not Found 1](https://hirael.com/blocks/not-found/not-found-01): Status pages block. Centered 404 with mono eyebrow, display headline, paired CTAs and a 'try one of these' suggested-routes list. Markdown: https://hirael.com/r/not-found-01.md. Registry JSON: https://hirael.com/r/not-found-01.json
- [Status 1](https://hirael.com/blocks/not-found/status-01): Status pages block. Service status page: an operational banner with a green check, a 90-day uptime grid of tooltip-backed day bars per service with a status legend, and a dated incident history where each update carries a tone-colored badge, a timestamp and a note. Markdown: https://hirael.com/r/status-01.md. Registry JSON: https://hirael.com/r/status-01.json
- [Coming Soon 1](https://hirael.com/blocks/not-found/coming-soon-01): Status pages 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 parts. Markdown: https://hirael.com/r/coming-soon-01.md. Registry JSON: https://hirael.com/r/coming-soon-01.json
- [Coming Soon 2](https://hirael.com/blocks/not-found/coming-soon-02): Status pages block. Full-viewport launch teaser: a pill badge, a word-by-word serif headline, sub-copy and a disabled pill CTA above a glowing horizon of sparkles with a rounded planet edge. Motion respects reduced-motion. Markdown: https://hirael.com/r/coming-soon-02.md. Registry JSON: https://hirael.com/r/coming-soon-02.json
- [Maintenance 1](https://hirael.com/blocks/not-found/maintenance-01): Status pages block. Scheduled maintenance page with a pulsing status dot, window card showing start, expected return and elapsed progress, paired CTAs and a timestamped updates list. Ships composable parts. Markdown: https://hirael.com/r/maintenance-01.md. Registry JSON: https://hirael.com/r/maintenance-01.json
- [Maintenance 2](https://hirael.com/blocks/not-found/maintenance-02): Status pages 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 spinner line. Message area is a live region. Markdown: https://hirael.com/r/maintenance-02.md. Registry JSON: https://hirael.com/r/maintenance-02.json
- [Error 1](https://hirael.com/blocks/not-found/error-01): Status pages 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. Markdown: https://hirael.com/r/error-01.md. Registry JSON: https://hirael.com/r/error-01.json
- [Logo Cloud 1](https://hirael.com/blocks/logo-cloud/logo-cloud-01): Logo cloud block. Centered eyebrow + headline above a 5-column bordered wordmark grid, with stat strip and case-study link below. Markdown: https://hirael.com/r/logo-cloud-01.md. Registry JSON: https://hirael.com/r/logo-cloud-01.json
- [Contact 1](https://hirael.com/blocks/contact/contact-01): Contact block. Production contact form with controlled state, inline validation, character counter, topic select, consent checkbox and a pending/sent state machine. Channel list and remote-location card alongside. Markdown: https://hirael.com/r/contact-01.md. Registry JSON: https://hirael.com/r/contact-01.json
- [Contact 2](https://hirael.com/blocks/contact/contact-02): Contact block. Bordered contact section with a serif header, a three-column info grid (email, location, social) using muted-fill labels and divider rules, and a "Find us online" footer of pill-shaped social links. Markdown: https://hirael.com/r/contact-02.md. Registry JSON: https://hirael.com/r/contact-02.json
- [Contact 3](https://hirael.com/blocks/contact/contact-03): Contact 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 a two-column CTA grid: an email button with the address beneath it and an outline call button that opens a WhatsApp chat. Ships composable parts. Markdown: https://hirael.com/r/contact-03.md. Registry JSON: https://hirael.com/r/contact-03.json
- [Careers 1](https://hirael.com/blocks/careers/careers-01): Careers block. Open-roles list with department filter pills and rows that show title, department, location and type, each linking out with a hover arrow. Markdown: https://hirael.com/r/careers-01.md. Registry JSON: https://hirael.com/r/careers-01.json
- [Blog 1](https://hirael.com/blocks/blog/blog-01): Blog block. Editorial blog index with a featured post on top and a 4-column grid of post cards underneath. Built on Card and Badge. Markdown: https://hirael.com/r/blog-01.md. Registry JSON: https://hirael.com/r/blog-01.json
- [E-commerce 1](https://hirael.com/blocks/ecommerce/ecommerce-01): E-commerce block. Product grid with category filter pills, sale and new badges, wishlist toggles, star ratings, compare-at pricing and per-card add buttons. Markdown: https://hirael.com/r/ecommerce-01.md. Registry JSON: https://hirael.com/r/ecommerce-01.json
- [E-commerce 2](https://hirael.com/blocks/ecommerce/ecommerce-02): E-commerce block. Shopping cart with quantity steppers, removable line items, promo-code validation, a free-shipping threshold, live totals and an empty-cart state. Markdown: https://hirael.com/r/ecommerce-02.md. Registry JSON: https://hirael.com/r/ecommerce-02.json
- [Dashboard 1](https://hirael.com/blocks/dashboard/dashboard-01): Dashboard 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 declares which direction is good news, so falling churn reads green; each chart bucket is a focusable control, so the numbers reach the keyboard as well as the mouse. Markdown: https://hirael.com/r/dashboard-01.md. Registry JSON: https://hirael.com/r/dashboard-01.json
- [Dashboard 2](https://hirael.com/blocks/dashboard/dashboard-02): Dashboard 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 carry their own unit (percent vs percentage points) and the direction that counts as good, and the area chart ships a screen-reader data table of the same numbers. Markdown: https://hirael.com/r/dashboard-02.md. Registry JSON: https://hirael.com/r/dashboard-02.json
- [Dashboard 3](https://hirael.com/blocks/dashboard/dashboard-03): Dashboard 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 through Intl, and every colour comes from a lookup keyed by plan or status, so no Tailwind class is stored in the data. Markdown: https://hirael.com/r/dashboard-03.md. Registry JSON: https://hirael.com/r/dashboard-03.json
- [Dashboard 4](https://hirael.com/blocks/dashboard/dashboard-04): Dashboard 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-hours cards, and a week-in-review band driven by a range select. The budget bar is a real progressbar, both charts ship a screen-reader data table, and each panel only shows an action when it has one. Markdown: https://hirael.com/r/dashboard-04.md. Registry JSON: https://hirael.com/r/dashboard-04.json
- [Dashboard 5](https://hirael.com/blocks/dashboard/dashboard-05): Dashboard block. Observability dashboard composed as one bordered lattice: greeting strip with range select, four sparkline KPI cells, cache and duration chart cells, an AI-insight callout, a P50/P95/P99 latency distribution measured against a stated target, and an active-deployments list. The deployment taking traffic gets --accent-cool, the reserved live tone, and its pulse respects prefers-reduced-motion. Markdown: https://hirael.com/r/dashboard-05.md. Registry JSON: https://hirael.com/r/dashboard-05.json
- [Dashboard 6](https://hirael.com/blocks/dashboard/dashboard-06): Dashboard 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, and a recent-runs list. The active-now stat uses --accent-cool for live state; every other color is a design token, so it works in light and dark. Markdown: https://hirael.com/r/dashboard-06.md. Registry JSON: https://hirael.com/r/dashboard-06.json
- [Integrations 1](https://hirael.com/blocks/integrations/integrations-01): Integrations block. Two-column integrations section with copy and feature list on the left, orbit diagram (central hub + 7 logo spokes connected by dashed rays) on the right. Markdown: https://hirael.com/r/integrations-01.md. Registry JSON: https://hirael.com/r/integrations-01.json
- [Image Gallery 1](https://hirael.com/blocks/image-gallery/image-gallery-01): Image gallery block. Studio-style masonry gallery with Tabs-driven category filter, real photo tiles via next/image, varied aspect ratios, hover zoom + arrow chip and an Empty fallback for empty filters. Markdown: https://hirael.com/r/image-gallery-01.md. Registry JSON: https://hirael.com/r/image-gallery-01.json
- [App Shell 1](https://hirael.com/blocks/app-shell/app-shell-01): App shell 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 breadcrumb and a ⌘K search that really focuses, plus an accounts table that filters live and sorts by any column with aria-sort. Markdown: https://hirael.com/r/app-shell-01.md. Registry JSON: https://hirael.com/r/app-shell-01.json
- [App Shell 2](https://hirael.com/blocks/app-shell/app-shell-02): App shell 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 section and counts matches per tab, and rows that actually do their thing — inline edit, copy to clipboard, or a switch — with a live save status. Markdown: https://hirael.com/r/app-shell-02.md. Registry JSON: https://hirael.com/r/app-shell-02.json
- [App Shell 3](https://hirael.com/blocks/app-shell/app-shell-03): App shell 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, archive and delete all work, with undo. Collapses to one pane on phones with a back button, and the composer sends on ⌘+Enter so Enter still makes a new line. Markdown: https://hirael.com/r/app-shell-03.md. Registry JSON: https://hirael.com/r/app-shell-03.json
- [App Shell 4](https://hirael.com/blocks/app-shell/app-shell-04): App shell 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 tooltips, an inset header with an account menu and notification count, and a welcome heading over dashed placeholder slots. Markdown: https://hirael.com/r/app-shell-04.md. Registry JSON: https://hirael.com/r/app-shell-04.json
- [App Shell 5](https://hirael.com/blocks/app-shell/app-shell-05): App shell 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, paired with a sticky header carrying the sidebar toggle and a breadcrumb. The inset holds a stat row and a placeholder for page content. Markdown: https://hirael.com/r/app-shell-05.md. Registry JSON: https://hirael.com/r/app-shell-05.json
- [Server Card](https://hirael.com/blocks/cloud/server-card): Cloud block. Fleet of host cards, each with a status pill, region, CPU / memory / disk specs and threshold-tinted usage meters. Ships composable parts. Markdown: https://hirael.com/r/server-card.md. Registry JSON: https://hirael.com/r/server-card.json
- [VM Table](https://hirael.com/blocks/cloud/vm-table): Cloud block. Virtual-machine instance table with live status dots, size, region, IP and uptime. Self-contained parts, no table primitive required. Markdown: https://hirael.com/r/vm-table.md. Registry JSON: https://hirael.com/r/vm-table.json
- [K8s Pod Table](https://hirael.com/blocks/cloud/k8s-pod-table): Cloud block. Kubernetes pod table with phase pills (Running, Pending, CrashLoopBackOff), ready and restart counts that flag unhealthy pods. Markdown: https://hirael.com/r/k8s-pod-table.md. Registry JSON: https://hirael.com/r/k8s-pod-table.json
- [Resource Status](https://hirael.com/blocks/cloud/resource-status): Cloud block. Statuspage-style panel: an overall banner over a list of resources, each with an operational / degraded / outage / maintenance state and uptime. Markdown: https://hirael.com/r/resource-status.md. Registry JSON: https://hirael.com/r/resource-status.json
- [Cluster Map](https://hirael.com/blocks/cloud/cluster-map): Cloud block. Grid heatmap of cluster nodes, each cell tinted by health and load with a hover label, plus a legend. Ships composable parts. Markdown: https://hirael.com/r/cluster-map.md. Registry JSON: https://hirael.com/r/cluster-map.json
- [Network Topology](https://hirael.com/blocks/cloud/network-topology): Cloud block. Coordinate-placed topology diagram: nodes with status and icons over an SVG edge layer, with animated active links. Ships composable parts. Markdown: https://hirael.com/r/network-topology.md. Registry JSON: https://hirael.com/r/network-topology.json
- [Storage Browser](https://hirael.com/blocks/cloud/storage-browser): Cloud block. Object-storage file browser with a clickable path breadcrumb, folder and file rows, sizes and modified dates. Ships composable parts. Markdown: https://hirael.com/r/storage-browser.md. Registry JSON: https://hirael.com/r/storage-browser.json
- [Log Viewer](https://hirael.com/blocks/cloud/log-viewer): Cloud block. Streaming log panel with severity-colored lines, timestamps, sources and tail-follow that unpins when you scroll up. Ships composable parts. Markdown: https://hirael.com/r/log-viewer.md. Registry JSON: https://hirael.com/r/log-viewer.json
- [Terminal](https://hirael.com/blocks/cloud/terminal): Cloud block. Terminal surface with a title bar, output lines and an interactive prompt input with command-history recall. Ships composable parts. Markdown: https://hirael.com/r/terminal.md. Registry JSON: https://hirael.com/r/terminal.json
- [Deployment History](https://hirael.com/blocks/cloud/deployment-history): Cloud block. Deployment feed on a connecting rail: version, environment and status (deployed, failed, building, rolled back) with commit and author meta. Markdown: https://hirael.com/r/deployment-history.md. Registry JSON: https://hirael.com/r/deployment-history.json
- [Env Editor](https://hirael.com/blocks/cloud/env-editor): Cloud block. Environment variables editor with masked secrets, copy, per-environment chips, .env import, key validation, and unsaved-change tracking. Ships composable parts. Markdown: https://hirael.com/r/env-editor.md. Registry JSON: https://hirael.com/r/env-editor.json
- [Audit Log](https://hirael.com/blocks/saas/audit-log): SaaS block. Compliance-style event log with expandable rows that reveal actor, action, status and request metadata. Composable disclosure parts. Markdown: https://hirael.com/r/audit-log.md. Registry JSON: https://hirael.com/r/audit-log.json
- [Billing Card](https://hirael.com/blocks/saas/billing-card): SaaS block. Current-plan summary with price, a usage meter, billing detail rows and footer actions. Composable parts for billing settings. Markdown: https://hirael.com/r/billing-card.md. Registry JSON: https://hirael.com/r/billing-card.json
- [Subscription Plans](https://hirael.com/blocks/saas/subscription-plans): SaaS block. In-app plan selector with featured and current states, a badge, feature checklist and per-plan action. Ships composable parts. Markdown: https://hirael.com/r/subscription-plans.md. Registry JSON: https://hirael.com/r/subscription-plans.json
- [API Keys](https://hirael.com/blocks/saas/api-keys): SaaS block. API key manager with reveal/hide, copy-to-clipboard, key metadata and a create action. Ships composable parts. Markdown: https://hirael.com/r/api-keys.md. Registry JSON: https://hirael.com/r/api-keys.json
- [Usage Dashboard](https://hirael.com/blocks/saas/usage-dashboard): SaaS block. Metered usage panel with per-resource progress bars that tint amber near the limit and red over it. Ships composable parts. Markdown: https://hirael.com/r/usage-dashboard.md. Registry JSON: https://hirael.com/r/usage-dashboard.json
- [Settings 1](https://hirael.com/blocks/saas/settings-01): SaaS 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 with an alert-dialog confirm. Ships composable parts. Markdown: https://hirael.com/r/settings-01.md. Registry JSON: https://hirael.com/r/settings-01.json
- [Settings 2](https://hirael.com/blocks/saas/settings-02): SaaS block. Security and notifications settings in tabs: change password with strength meter, two-factor toggle, revocable session list, and grouped notification switches under a Pause all master. Ships composable parts. Markdown: https://hirael.com/r/settings-02.md. Registry JSON: https://hirael.com/r/settings-02.json
- [Members 1](https://hirael.com/blocks/saas/members-01): SaaS 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 validates emails as tags. Ships composable parts. Markdown: https://hirael.com/r/members-01.md. Registry JSON: https://hirael.com/r/members-01.json
- [Onboarding 1](https://hirael.com/blocks/saas/onboarding-01): SaaS 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 fade between steps. Ships composable parts. Markdown: https://hirael.com/r/onboarding-01.md. Registry JSON: https://hirael.com/r/onboarding-01.json
- [Prompt Input](https://hirael.com/blocks/ai/prompt-input): AI block. Chat composer with an auto-growing textarea, Enter to send, attachments, a model picker, and a Stop button while streaming. Ships composable parts. Markdown: https://hirael.com/r/prompt-input.md. Registry JSON: https://hirael.com/r/prompt-input.json
- [Message Thread](https://hirael.com/blocks/ai/message-thread): AI block. Message list that follows streaming output, with tool calls, reasoning, sources, hover actions, typing dots, and a streaming cursor. Ships composable parts. Markdown: https://hirael.com/r/message-thread.md. Registry JSON: https://hirael.com/r/message-thread.json
- [AI Chat 1](https://hirael.com/blocks/ai/ai-chat-01): AI 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. Markdown: https://hirael.com/r/ai-chat-01.md. Registry JSON: https://hirael.com/r/ai-chat-01.json
- [Activity Feed](https://hirael.com/blocks/widgets/activity-feed): Widgets block. Avatar-led event feed with a connecting rail, actor and action lines, timestamps, quoted bodies and date dividers. Ships composable parts. Markdown: https://hirael.com/r/activity-feed.md. Registry JSON: https://hirael.com/r/activity-feed.json
- [Inspector Panel](https://hirael.com/blocks/widgets/inspector-panel): Widgets block. Design-tool inspector with a header, collapsible sections and label/control rows. Composable parts for property panels and sidebars. Markdown: https://hirael.com/r/inspector-panel.md. Registry JSON: https://hirael.com/r/inspector-panel.json
- [Tenant Switcher](https://hirael.com/blocks/widgets/tenant-switcher): Widgets 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. Ships composable parts. Markdown: https://hirael.com/r/tenant-switcher.md. Registry JSON: https://hirael.com/r/tenant-switcher.json
- [KPI Grid](https://hirael.com/blocks/widgets/kpi-grid): Widgets block. Hairline-joined grid of KPI tiles with label, value, an up/down/flat delta chip and a dependency-free sparkline. Ships composable parts. Markdown: https://hirael.com/r/kpi-grid.md. Registry JSON: https://hirael.com/r/kpi-grid.json
- [Quick Actions](https://hirael.com/blocks/widgets/quick-actions): Widgets block. Grid of dashboard shortcut tiles with icon, label and description. Each tile is a button or, via asChild, a link. Ships composable parts. Markdown: https://hirael.com/r/quick-actions.md. Registry JSON: https://hirael.com/r/quick-actions.json
- [Notifications](https://hirael.com/blocks/widgets/notifications): Widgets block. Notification panel with header, list, per-item media, title, description, time and an accent-cool unread marker. Ships composable parts. Markdown: https://hirael.com/r/notifications.md. Registry JSON: https://hirael.com/r/notifications.json
- [Cookie Consent](https://hirael.com/blocks/widgets/cookie-consent): Widgets block. Floating consent banner with per-category switches, accept, reject, and save actions, and a choice persisted in localStorage. Ships composable parts. Markdown: https://hirael.com/r/cookie-consent.md. Registry JSON: https://hirael.com/r/cookie-consent.json
- [Changelog 1](https://hirael.com/blocks/changelog/changelog-01): Changelog 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 parts. Markdown: https://hirael.com/r/changelog-01.md. Registry JSON: https://hirael.com/r/changelog-01.json

## Templates
- [Creative Studio](https://hirael.com/templates/creative-studio): Full-page template. 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 staggered feature-card grid. Framer Motion throughout, with a self-contained warm-cream palette. Markdown: https://hirael.com/r/creative-studio.md. Registry JSON: https://hirael.com/r/creative-studio.json
- [Agency Landing](https://hirael.com/templates/agency-landing): Full-page template. 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 grid of autoplaying video cards, and a dark closing footer with a call to action. Built on the shaders package, with a self-contained light palette. Markdown: https://hirael.com/r/agency-landing.md. Registry JSON: https://hirael.com/r/agency-landing.json
- [Mindloop](https://hirael.com/templates/mindloop): Full-page template. Dark, monochrome newsletter landing page: a full-screen video hero with an inline subscribe form, an answer-engine section, scroll-revealed mission copy, a four-up feature grid and a streaming-video call to action. Framer Motion throughout, with a self-contained pure-black palette and liquid-glass accents. Markdown: https://hirael.com/r/mindloop.md. Registry JSON: https://hirael.com/r/mindloop.json
- [Portfolio](https://hirael.com/templates/portfolio): Full-page template. 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 list, a scroll-pinned parallax gallery with lightbox, count-up stats and a video contact footer. Self-contained dark palette, driven by GSAP and Framer Motion. Markdown: https://hirael.com/r/portfolio.md. Registry JSON: https://hirael.com/r/portfolio.json
- [USD Halo](https://hirael.com/templates/usd-halo): Full-page template. 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, a backers marquee, and a use-modes split with an autoplaying video panel, closing on a dark anchor footer. Self-contained light palette. Markdown: https://hirael.com/r/usd-halo.md. Registry JSON: https://hirael.com/r/usd-halo.json
- [Rivr](https://hirael.com/templates/rivr): Full-page template. 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 bento feature grid, a video call to action and a light footer. Self-contained light palette, Helvetica system type, Framer Motion throughout. Markdown: https://hirael.com/r/rivr.md. Registry JSON: https://hirael.com/r/rivr.json
- [Velorah](https://hirael.com/templates/velorah): Full-page template. 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 switchable tabs, an HLS streaming statement with a stats row, a video preorder call to action and a multi-column footer. Self-contained pure-black palette, Inter + Instrument Serif type. Markdown: https://hirael.com/r/velorah.md. Registry JSON: https://hirael.com/r/velorah.json
- [Asme](https://hirael.com/templates/asme): Full-page template. 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 scroll-revealed about, featured-video, philosophy and services sections, closing on a multi-column footer. Framer Motion throughout, with a self-contained pure-black palette and Instrument Serif accents. Markdown: https://hirael.com/r/asme.md. Registry JSON: https://hirael.com/r/asme.json
- [NexaCore](https://hirael.com/templates/nexacore): Full-page template. 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 hover, a chaos-versus-control split around a circular streaming video, and a four-pillar delivery staircase. Self-contained navy-and-lavender palette with multi-stop brand gradients, driven by lucide-react. Markdown: https://hirael.com/r/nexacore.md. Registry JSON: https://hirael.com/r/nexacore.json
- [Aurael](https://hirael.com/templates/aurael): Full-page template. 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 cross-fades between morning and night, then hairline-ruled bands with a sticky meta rail for how it works, cases, about, careers, resources and customers. Self-contained morning/night palettes, Inter + Manrope with Cairo for Arabic, and RTL that follows the surrounding document. Markdown: https://hirael.com/r/aurael.md. Registry JSON: https://hirael.com/r/aurael.json
- [Novael](https://hirael.com/templates/novael): Full-page template. 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 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. Self-contained dark palette, Inter + Manrope with Cairo for Arabic, and RTL that follows the surrounding document. Markdown: https://hirael.com/r/novael.md. Registry JSON: https://hirael.com/r/novael.json

## Docs
- [Full catalog JSON (Radix UI)](https://hirael.com/r/registry.json): Every item in one shadcn registry document
- [Full catalog JSON (Base UI)](https://hirael.com/r/base/registry.json): The same catalog built on Base UI primitives
- [Components overview](https://hirael.com/components): All components with live previews
- [Blocks overview](https://hirael.com/blocks): Block categories and schematic index
- [Templates overview](https://hirael.com/templates): Full-page templates with framed previews
- [Changelog](https://hirael.com/changelog): Release notes
- [GitHub](https://github.com/MohammadShehadeh/hirael): Source repository

Component categories: inputs = Inputs, pickers = Pickers, files = Files, data = Data display, display = Display, animation = Animation, navigation = Navigation