{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "hirael", "homepage": "https://hirael.com", "items": [ { "name": "multi-select", "type": "registry:component", "title": "Multi Select", "description": "Chip-based multi-select with command-palette dropdown, search, select-all and a loading state. Compound and single-prop APIs.", "categories": [ "inputs" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "command", "input-group", "popover", "spinner", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/multi-select.tsx", "type": "registry:component", "target": "components/multi-select.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/multi-select" } } }, { "name": "number-range", "type": "registry:component", "title": "Number Range", "description": "Two-thumb slider paired with synced number inputs. Min/max/step, currency or unit formatting, keyboard-first.", "categories": [ "inputs" ], "dependencies": [], "registryDependencies": [ "input-group", "slider", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/number-range.tsx", "type": "registry:component", "target": "components/number-range.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/number-range" } } }, { "name": "year-picker", "type": "registry:component", "title": "Year Picker", "description": "Decade-grid year picker with keyboard nav, min/max bounds, single or range mode.", "categories": [ "pickers" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "popover", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/year-picker.tsx", "type": "registry:component", "target": "components/year-picker.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/pickers/year-picker" } } }, { "name": "tag-input", "type": "registry:component", "title": "Tag Input", "description": "Chip input with paste-to-split, dedupe, validation hook and max tags.", "categories": [ "inputs" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "https://hirael.com/r/compose-refs.json", "input-group", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/tag-input.tsx", "type": "registry:component", "target": "components/tag-input.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/tag-input" } } }, { "name": "duration-input", "type": "registry:component", "title": "Duration Input", "description": "Segmented duration field over days, hours, minutes and seconds. Digits auto-advance, arrows step, and the value stays a plain number of seconds.", "categories": [ "inputs" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "input-group", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/duration-input.tsx", "type": "registry:component", "target": "components/duration-input.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/duration-input" } } }, { "name": "number-field", "type": "registry:component", "title": "Number Field", "description": "Number input with step buttons, arrow-key and hold-to-repeat stepping, min and max, and Intl formatting for currency, percent or units. Submits the raw number.", "categories": [ "inputs" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/compose-refs.json", "input-group", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/number-field.tsx", "type": "registry:component", "target": "components/number-field.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/number-field" } } }, { "name": "segmented-control", "type": "registry:component", "title": "Segmented Control", "description": "Single-choice control with a sliding thumb. Keyboard works like a radio group and mirrors in RTL. Two sizes, icons, disabled options and a full-width mode.", "categories": [ "inputs" ], "dependencies": [], "registryDependencies": [ "https://hirael.com/r/compose-refs.json", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/segmented-control.tsx", "type": "registry:component", "target": "components/segmented-control.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/segmented-control" } } }, { "name": "autocomplete", "type": "registry:component", "title": "Autocomplete", "description": "A free-text input with suggestions from a local list or an async search, with optional inline completion, groups and recent entries. The value is whatever you type.", "categories": [ "inputs" ], "dependencies": [], "registryDependencies": [ "https://hirael.com/r/compose-refs.json", "input-group", "popover", "spinner", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/autocomplete.tsx", "type": "registry:component", "target": "components/autocomplete.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/autocomplete" } } }, { "name": "checkbox-group", "type": "registry:component", "title": "Checkbox Group", "description": "A group of checkboxes with a select-all parent, nested groups, min and max limits, and an optional search that narrows the list.", "categories": [ "inputs" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "checkbox", "input-group", "label", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/checkbox-group.tsx", "type": "registry:component", "target": "components/checkbox-group.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/checkbox-group" } } }, { "name": "lazy-select", "type": "registry:component", "title": "Lazy Select", "description": "Autocomplete single-select that defers loading until open and pages through results on scroll. Debounced server-side search with a pluggable lazy paginator hook.", "categories": [ "inputs" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "command", "popover", "spinner", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/lazy-select.tsx", "type": "registry:component", "target": "components/lazy-select.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/lazy-select" } } }, { "name": "password-input", "type": "registry:component", "title": "Password Input", "description": "Password field with a show/hide toggle and an optional pluggable strength meter.", "categories": [ "inputs" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "input-group", "https://hirael.com/r/use-controllable-state.json" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/components/password-input.tsx", "type": "registry:component", "target": "components/password-input.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/password-input" } } }, { "name": "currency-input", "type": "registry:component", "title": "Currency Input", "description": "Locale-aware grouping with currency-symbol prefix and configurable decimal precision.", "categories": [ "inputs" ], "dependencies": [], "registryDependencies": [ "input-group", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/currency-input.tsx", "type": "registry:component", "target": "components/currency-input.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/currency-input" } } }, { "name": "phone-input", "type": "registry:component", "title": "Phone Input", "description": "Phone number field with a country dial-code picker and E.164 output from libphonenumber-js.", "categories": [ "inputs" ], "dependencies": [ "libphonenumber-js", "lucide-react" ], "registryDependencies": [ "command", "https://hirael.com/r/country-select.json", "input-group", "popover" ], "files": [ { "path": "registry/hirael/bases/radix/components/phone-input.tsx", "type": "registry:component", "target": "components/phone-input.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/phone-input" } } }, { "name": "file-dropzone", "type": "registry:component", "title": "File Dropzone", "description": "Drag-and-drop or click upload zone on react-dropzone, with a file list, type and size validation, and readable rejection messages.", "categories": [ "files" ], "dependencies": [ "lucide-react", "react-dropzone" ], "registryDependencies": [ "button", "https://hirael.com/r/format-bytes.json", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/file-dropzone.tsx", "type": "registry:component", "target": "components/file-dropzone.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/files/file-dropzone" } } }, { "name": "rating", "type": "registry:component", "title": "Rating", "description": "Star rating with hover preview, half-star precision, read-only mode and sm / md / lg sizes.", "categories": [ "inputs" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/use-controllable-state.json" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/components/rating.tsx", "type": "registry:component", "target": "components/rating.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/rating" } } }, { "name": "timeline", "type": "registry:component", "title": "Timeline", "description": "Vertical event timeline with default or icon dots, tone variants and labelled time / title / description parts.", "categories": [ "data" ], "dependencies": [ "class-variance-authority" ], "registryDependencies": [], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/components/timeline.tsx", "type": "registry:component", "target": "components/timeline.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/data/timeline" } } }, { "name": "kbd-button", "type": "registry:component", "title": "Kbd Button", "description": "A pressable 3D keycap with hover lift and a pressed state, for shortcut legends and keyboard-driven UIs. Pairs with shadcn's Kbd and KbdGroup for inline shortcuts and chords.", "categories": [ "display" ], "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/components/kbd-button.tsx", "type": "registry:component", "target": "components/kbd-button.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/kbd-button" } } }, { "name": "callout", "type": "registry:component", "title": "Callout", "description": "MDX-style admonition with neutral / info / success / warning / destructive variants, CalloutTitle and CalloutDescription parts, and an optional icon override. Ships --info / --success / --warning theme tokens.", "categories": [ "display" ], "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/components/callout.tsx", "type": "registry:component", "target": "components/callout.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/callout" } } }, { "name": "scroll-progress", "type": "registry:component", "title": "Scroll Progress", "description": "Fixed reading progress bar. Tracks document scroll by default or a scoped container ref.", "categories": [ "display" ], "dependencies": [], "registryDependencies": [ "https://hirael.com/r/compose-refs.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/scroll-progress.tsx", "type": "registry:component", "target": "components/scroll-progress.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/scroll-progress" } } }, { "name": "hero-01", "type": "registry:block", "title": "Hero 01", "description": "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.", "categories": [ "blocks", "hero" ], "dependencies": [ "lucide-react", "shaders" ], "registryDependencies": [ "button", "https://hirael.com/r/use-reduced-motion.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/hero-01/hero-01.tsx", "type": "registry:block", "target": "components/blocks/hero-01.tsx" }, { "path": "registry/hirael/bases/radix/blocks/hero-01/hero-01-backdrop.tsx", "type": "registry:block", "target": "components/blocks/hero-01-backdrop.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/hero/hero-01" } } }, { "name": "hero-02", "type": "registry:block", "title": "Hero 02", "description": "Centered hero over animated gradient bars, with a release pill, a serif headline with an underlined accent, dual CTA and a wordmark strip.", "categories": [ "blocks", "hero" ], "dependencies": [ "lucide-react", "shaders" ], "registryDependencies": [ "button", "https://hirael.com/r/use-reduced-motion.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/hero-02/hero-02.tsx", "type": "registry:block", "target": "components/blocks/hero-02.tsx" }, { "path": "registry/hirael/bases/radix/blocks/hero-02/hero-02-backdrop.tsx", "type": "registry:block", "target": "components/blocks/hero-02-backdrop.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/hero/hero-02" } } }, { "name": "hero-03", "type": "registry:block", "title": "Hero 03", "description": "Editorial centered hero on a faded grid, with a serif headline, sub-copy, dual CTA and a logo cloud of customer wordmarks.", "categories": [ "blocks", "hero" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/hero-03/hero-03.tsx", "type": "registry:block", "target": "components/blocks/hero-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/hero/hero-03" } } }, { "name": "hero-04", "type": "registry:block", "title": "Hero 04", "description": "Full-bleed image-banner hero with a dark scrim, a slim nav, a serif headline and dual CTA aligned to the bottom.", "categories": [ "blocks", "hero" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/hero-04/hero-04.tsx", "type": "registry:block", "target": "components/blocks/hero-04.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/hero/hero-04" } } }, { "name": "hero-05", "type": "registry:block", "title": "Hero 05", "description": "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.", "categories": [ "blocks", "hero" ], "dependencies": [ "lucide-react", "shaders" ], "registryDependencies": [ "button", "https://hirael.com/r/use-reduced-motion.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/hero-05/hero-05.tsx", "type": "registry:block", "target": "components/blocks/hero-05.tsx" }, { "path": "registry/hirael/bases/radix/blocks/hero-05/hero-05-backdrop.tsx", "type": "registry:block", "target": "components/blocks/hero-05-backdrop.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/hero/hero-05" } } }, { "name": "feature-01", "type": "registry:block", "title": "Feature 01", "description": "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, then a three-column primitives row and a pair of link calls to action.", "categories": [ "blocks", "feature" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/feature-01/feature-01.tsx", "type": "registry:block", "target": "components/blocks/feature-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/features/feature-01" } } }, { "name": "feature-02", "type": "registry:block", "title": "Feature 02", "description": "Centered header above a six-item list of what every catalog item includes, laid out on hairline rows with a tabular index kicker.", "categories": [ "blocks", "feature" ], "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/blocks/feature-02/feature-02.tsx", "type": "registry:block", "target": "components/blocks/feature-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/features/feature-02" } } }, { "name": "pricing-01", "type": "registry:block", "title": "Pricing 01", "description": "Three-tier card row with a monthly/yearly toggle that swaps each price and billing note, a featured middle plan, feature checklist and CTA.", "categories": [ "blocks", "pricing" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "separator", "toggle-group" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/pricing-01/pricing-01.tsx", "type": "registry:block", "target": "components/blocks/pricing-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/pricing/pricing-01" } } }, { "name": "pricing-02", "type": "registry:block", "title": "Pricing 02", "description": "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.", "categories": [ "blocks", "pricing" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "table", "toggle-group" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/pricing-02/pricing-02.tsx", "type": "registry:block", "target": "components/blocks/pricing-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/pricing/pricing-02" } } }, { "name": "pricing-03", "type": "registry:block", "title": "Pricing 03", "description": "Three-tier card row with a monthly/yearly billing toggle that tweens the price, a featured plan, per-plan icon, feature checklist and CTA.", "categories": [ "blocks", "pricing" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/animated-number.json", "badge", "button", "card", "toggle-group" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/pricing-03/pricing-03.tsx", "type": "registry:block", "target": "components/blocks/pricing-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/pricing/pricing-03" } } }, { "name": "testimonial-01", "type": "registry:block", "title": "Testimonial 01", "description": "Centered single quote with stylized open-mark, author block (avatar, name, role, company) and a muted wordmark row below.", "categories": [ "blocks", "testimonial" ], "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/blocks/testimonial-01/testimonial-01.tsx", "type": "registry:block", "target": "components/blocks/testimonial-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/testimonials/testimonial-01" } } }, { "name": "testimonial-02", "type": "registry:block", "title": "Testimonial 02", "description": "Masonry quote grid (CSS columns) with ~6 bordered quote cards of varying length and author rows.", "categories": [ "blocks", "testimonial" ], "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/blocks/testimonial-02/testimonial-02.tsx", "type": "registry:block", "target": "components/blocks/testimonial-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/testimonials/testimonial-02" } } }, { "name": "cta-01", "type": "registry:block", "title": "CTA 01", "description": "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.", "categories": [ "blocks", "cta" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "https://hirael.com/r/copy-button.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/cta-01/cta-01.tsx", "type": "registry:block", "target": "components/blocks/cta-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/cta/cta-01" } } }, { "name": "cta-02", "type": "registry:block", "title": "CTA 02", "description": "Full-bleed centered CTA with framing top/bottom rules, highlight underlay on the key word, and an install command with a copy button.", "categories": [ "blocks", "cta" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "https://hirael.com/r/copy-button.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/cta-02/cta-02.tsx", "type": "registry:block", "target": "components/blocks/cta-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/cta/cta-02" } } }, { "name": "cta-03", "type": "registry:block", "title": "CTA 03", "description": "Full-bleed CTA card with an animated dithered shader backdrop, an eyebrow pill, a serif headline and a pill action button.", "categories": [ "blocks", "cta" ], "dependencies": [ "lucide-react", "shaders" ], "registryDependencies": [ "button", "https://hirael.com/r/use-reduced-motion.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/cta-03/cta-03.tsx", "type": "registry:block", "target": "components/blocks/cta-03.tsx" }, { "path": "registry/hirael/bases/radix/blocks/cta-03/cta-03-backdrop.tsx", "type": "registry:block", "target": "components/blocks/cta-03-backdrop.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/cta/cta-03" } } }, { "name": "faq-01", "type": "registry:block", "title": "FAQ 01", "description": "Two-column FAQ: sticky heading and a hairline help note on the start side, numbered accordion on the end side.", "categories": [ "blocks", "faq" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/accordion.json", "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/faq-01/faq-01.tsx", "type": "registry:block", "target": "components/blocks/faq-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/faqs/faq-01" } } }, { "name": "faq-02", "type": "registry:block", "title": "FAQ 02", "description": "Centered heading with two-column accordion grid below. Each row tagged with a Qn index.", "categories": [ "blocks", "faq" ], "dependencies": [], "registryDependencies": [ "https://hirael.com/r/accordion.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/faq-02/faq-02.tsx", "type": "registry:block", "target": "components/blocks/faq-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/faqs/faq-02" } } }, { "name": "faq-03", "type": "registry:block", "title": "FAQ 03", "description": "Searchable FAQ with category tabs, a live-filtered accordion, an empty state for missed queries and a support CTA strip.", "categories": [ "blocks", "faq" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/accordion.json", "button", "empty", "input-group", "tabs" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/faq-03/faq-03.tsx", "type": "registry:block", "target": "components/blocks/faq-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/faqs/faq-03" } } }, { "name": "faq-04", "type": "registry:block", "title": "FAQ 04", "description": "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 a support footer line.", "categories": [ "blocks", "faq" ], "dependencies": [], "registryDependencies": [ "https://hirael.com/r/accordion.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/faq-04/faq-04.tsx", "type": "registry:block", "target": "components/blocks/faq-04.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/faqs/faq-04" } } }, { "name": "login-01", "type": "registry:block", "title": "Login 01", "description": "Centered sign-in: logo and heading above a card with email, password and an inline forgot-password link, a passkey option, an alert for failed attempts and a create-account line below.", "categories": [ "blocks", "login" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "alert", "button", "card", "field", "input", "https://hirael.com/r/password-input.json", "spinner" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/login-01/login-01.tsx", "type": "registry:block", "target": "components/blocks/login-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/login-01" } } }, { "name": "login-02", "type": "registry:block", "title": "Login 02", "description": "Split login with a testimonial pane. The form leads with Google and GitHub, then email and password with an inline forgot link and an alert for failed attempts. The pane holds a quote and two results over a world map drawn in the foreground token.", "categories": [ "blocks", "login" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "alert", "button", "field", "input", "https://hirael.com/r/password-input.json", "spinner" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/login-02/login-02.tsx", "type": "registry:block", "target": "components/blocks/login-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/login-02" } } }, { "name": "login-03", "type": "registry:block", "title": "Login 03", "description": "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.", "categories": [ "blocks", "login" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "button", "spinner" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/login-03/login-03.tsx", "type": "registry:block", "target": "components/blocks/login-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/login-03" } } }, { "name": "login-04", "type": "registry:block", "title": "Login 04", "description": "Identifier-first sign-in in one wide card: heading on one side, fields on the other. Email first, then password, with an account chip to switch back and a hidden username field so password managers fill the right account.", "categories": [ "blocks", "login" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "field", "input", "https://hirael.com/r/password-input.json", "spinner" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/login-04/login-04.tsx", "type": "registry:block", "target": "components/blocks/login-04.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/login-04" } } }, { "name": "login-05", "type": "registry:block", "title": "Login 05", "description": "Provider-first sign-in: stacked Continue with GitHub, Google and Apple buttons, plus email and passkey options. Email sends a magic link and swaps to a check-your-email state.", "categories": [ "blocks", "login" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "field", "input", "spinner" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/login-05/login-05.tsx", "type": "registry:block", "target": "components/blocks/login-05.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/login-05" } } }, { "name": "signup-01", "type": "registry:block", "title": "Sign Up 01", "description": "Centered signup card: GitHub and Google first, then name, email and a password with a strength meter and hint. Terms sit under the card as plain text, and submitting swaps to a check-your-email state.", "categories": [ "blocks", "login" ], "dependencies": [], "registryDependencies": [ "button", "card", "field", "input", "https://hirael.com/r/password-input.json", "spinner" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/signup-01/signup-01.tsx", "type": "registry:block", "target": "components/blocks/signup-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/signup-01" } } }, { "name": "forgot-password-01", "type": "registry:block", "title": "Forgot Password 01", "description": "Centered reset request: one email field with inline validation, then a check-your-email state that echoes the address, links back to sign in and offers a resend.", "categories": [ "blocks", "login" ], "dependencies": [], "registryDependencies": [ "button", "card", "field", "input", "spinner" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/forgot-password-01/forgot-password-01.tsx", "type": "registry:block", "target": "components/blocks/forgot-password-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/forgot-password-01" } } }, { "name": "otp-verify-01", "type": "registry:block", "title": "OTP Verify 01", "description": "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 and a verified state.", "categories": [ "blocks", "login" ], "dependencies": [], "registryDependencies": [ "button", "card", "field", "input-otp", "spinner" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/otp-verify-01/otp-verify-01.tsx", "type": "registry:block", "target": "components/blocks/otp-verify-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/otp-verify-01" } } }, { "name": "two-factor-setup-01", "type": "registry:block", "title": "Two-Factor Setup 01", "description": "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.", "categories": [ "blocks", "login" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "checkbox", "https://hirael.com/r/copy-button.json", "field", "input-otp", "https://hirael.com/r/qr-code.json", "spinner", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/two-factor-setup-01/two-factor-setup-01.tsx", "type": "registry:block", "target": "components/blocks/two-factor-setup-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/auth/two-factor-setup-01" } } }, { "name": "header-01", "type": "registry:block", "title": "Header 01", "description": "Sticky top nav with brand monogram, centered anchor links, dual auth CTAs and a slide-down mobile menu.", "categories": [ "blocks", "header" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "drawer", "dropdown-menu" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/header-01/header-01.tsx", "type": "registry:block", "target": "components/blocks/header-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/header/header-01" } } }, { "name": "header-02", "type": "registry:block", "title": "Header 02", "description": "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.", "categories": [ "blocks", "header" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/header-02/header-02.tsx", "type": "registry:block", "target": "components/blocks/header-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/header/header-02" } } }, { "name": "header-03", "type": "registry:block", "title": "Header 03", "description": "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, and a side sheet with collapsible groups on small screens.", "categories": [ "blocks", "header" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/accordion.json", "button", "navigation-menu", "sheet" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/header-03/header-03.tsx", "type": "registry:block", "target": "components/blocks/header-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/header/header-03" } } }, { "name": "footer-01", "type": "registry:block", "title": "Footer 01", "description": "Brand + tagline column alongside Product / Company / Resources link columns, with a copyright row and social icons below a thin rule.", "categories": [ "blocks", "footer" ], "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/blocks/footer-01/footer-01.tsx", "type": "registry:block", "target": "components/blocks/footer-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/footer/footer-01" } } }, { "name": "not-found-01", "type": "registry:block", "title": "Not Found 01", "description": "Centered 404 with mono eyebrow, display headline, paired CTAs and a 'try one of these' suggested-routes list.", "categories": [ "blocks", "not-found" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/not-found-01/not-found-01.tsx", "type": "registry:block", "target": "components/blocks/not-found-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/not-found/not-found-01" } } }, { "name": "month-picker", "type": "registry:component", "title": "Month Picker", "description": "4×3 month grid with year stepper, keyboard nav, min/max bounds, single or range mode.", "categories": [ "pickers" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "popover", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/month-picker.tsx", "type": "registry:component", "target": "components/month-picker.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/pickers/month-picker" } } }, { "name": "time-picker", "type": "registry:component", "title": "Time Picker", "description": "Hour, minute and optional second scroll columns with 12/24h modes, step intervals and keyboard nav.", "categories": [ "pickers" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "popover", "tabs", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/time-picker.tsx", "type": "registry:component", "target": "components/time-picker.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/pickers/time-picker" } } }, { "name": "color-picker", "type": "registry:component", "title": "Color Picker", "description": "Color picker on react-colorful with HEX / RGB / HSL inputs (colord), an eyedropper where supported, and recent swatches.", "categories": [ "pickers" ], "dependencies": [ "colord", "lucide-react", "react-colorful" ], "registryDependencies": [ "button", "input", "popover", "tabs", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/color-picker.tsx", "type": "registry:component", "target": "components/color-picker.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/pickers/color-picker" } } }, { "name": "avatar-stack", "type": "registry:component", "title": "Avatar Stack", "description": "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.", "categories": [ "data" ], "dependencies": [ "@radix-ui/react-slot", "class-variance-authority" ], "registryDependencies": [ "avatar" ], "files": [ { "path": "registry/hirael/bases/radix/components/avatar-stack.tsx", "type": "registry:component", "target": "components/avatar-stack.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/data/avatar-stack" } } }, { "name": "announcement-bar", "type": "registry:component", "title": "Announcement Bar", "description": "Top-of-page banner with default / primary / muted tones, optional dismiss button and localStorage persistence.", "categories": [ "display" ], "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/components/announcement-bar.tsx", "type": "registry:component", "target": "components/announcement-bar.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/announcement-bar" } } }, { "name": "logo-cloud-01", "type": "registry:block", "title": "Logo Cloud 01", "description": "Centered eyebrow + headline above a 6-column bordered wordmark grid, with stat strip and case-study link below.", "categories": [ "blocks", "logo-cloud" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/logo-cloud-01/logo-cloud-01.tsx", "type": "registry:block", "target": "components/blocks/logo-cloud-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/logo-cloud/logo-cloud-01" } } }, { "name": "logo-cloud-02", "type": "registry:block", "title": "Logo Cloud 02", "description": "Two full-bleed marquee rows of wordmarks running in opposite directions, edges faded into the page, each row holding still on hover.", "categories": [ "blocks", "logo-cloud" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/marquee.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/logo-cloud-02/logo-cloud-02.tsx", "type": "registry:block", "target": "components/blocks/logo-cloud-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/logo-cloud/logo-cloud-02" } } }, { "name": "logo-cloud-03", "type": "registry:block", "title": "Logo Cloud 03", "description": "Quiet single-row wordmark strip that brightens on hover, a rule, then a pull quote with an avatar and attribution.", "categories": [ "blocks", "logo-cloud" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar", "separator" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/logo-cloud-03/logo-cloud-03.tsx", "type": "registry:block", "target": "components/blocks/logo-cloud-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/logo-cloud/logo-cloud-03" } } }, { "name": "logo-cloud-04", "type": "registry:block", "title": "Logo Cloud 04", "description": "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 stops once you pick one.", "categories": [ "blocks", "logo-cloud" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "tabs" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/logo-cloud-04/logo-cloud-04.tsx", "type": "registry:block", "target": "components/blocks/logo-cloud-04.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/logo-cloud/logo-cloud-04" } } }, { "name": "contact-01", "type": "registry:block", "title": "Contact 01", "description": "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 note alongside.", "categories": [ "blocks", "contact" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "checkbox", "field", "input", "select", "separator", "spinner", "textarea" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/contact-01/contact-01.tsx", "type": "registry:block", "target": "components/blocks/contact-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/contact/contact-01" } } }, { "name": "blog-01", "type": "registry:block", "title": "Blog 01", "description": "Editorial blog index with a featured post on top and a 4-column grid of post cards underneath. Built on Card and Badge.", "categories": [ "blocks", "blog" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "card", "separator", "toggle-group" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/blog-01/blog-01.tsx", "type": "registry:block", "target": "components/blocks/blog-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/blog/blog-01" } } }, { "name": "blog-02", "type": "registry:block", "title": "Blog 02", "description": "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 with nothing in it yet.", "categories": [ "blocks", "blog" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "empty", "tabs" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/blog-02/blog-02.tsx", "type": "registry:block", "target": "components/blocks/blog-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/blog/blog-02" } } }, { "name": "ecommerce-01", "type": "registry:block", "title": "Ecommerce 01", "description": "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 cart count.", "categories": [ "blocks", "ecommerce" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "https://hirael.com/r/rating.json" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/ecommerce-01/ecommerce-01.tsx", "type": "registry:block", "target": "components/blocks/ecommerce-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/ecommerce/ecommerce-01" } } }, { "name": "ecommerce-02", "type": "registry:block", "title": "Ecommerce 02", "description": "Shopping cart with capped quantity steppers, animated line-item removal, promo-code validation, a free-shipping threshold, live totals, a checkout that confirms with an order number, and an empty-cart state.", "categories": [ "blocks", "ecommerce" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "empty", "input-group", "separator", "spinner" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/ecommerce-02/ecommerce-02.tsx", "type": "registry:block", "target": "components/blocks/ecommerce-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/ecommerce/ecommerce-02" } } }, { "name": "ecommerce-03", "type": "registry:block", "title": "Ecommerce 03", "description": "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 cart, and details in an accordion.", "categories": [ "blocks", "ecommerce" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/accordion.json", "badge", "breadcrumb", "button", "input-group", "radio-group", "https://hirael.com/r/rating.json", "toggle-group" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/ecommerce-03/ecommerce-03.tsx", "type": "registry:block", "target": "components/blocks/ecommerce-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/ecommerce/ecommerce-03" } } }, { "name": "ecommerce-04", "type": "registry:block", "title": "Ecommerce 04", "description": "Category page with a sticky filter sidebar (category counts that react to the other filters, price range, colour, stock, rating), removable filter chips, sorting, an empty state, and a filter sheet on small screens.", "categories": [ "blocks", "ecommerce" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "checkbox", "empty", "field", "radio-group", "https://hirael.com/r/rating.json", "select", "sheet", "slider", "switch", "toggle-group" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/ecommerce-04/ecommerce-04.tsx", "type": "registry:block", "target": "components/blocks/ecommerce-04.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/ecommerce/ecommerce-04" } } }, { "name": "dashboard-01", "type": "registry:block", "title": "Dashboard 01", "description": "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.", "categories": [ "blocks", "dashboard" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar", "button", "card", "select", "separator", "tabs", "tooltip" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/dashboard-01/dashboard-01.tsx", "type": "registry:block", "target": "components/blocks/dashboard-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/dashboard/dashboard-01" } } }, { "name": "dashboard-02", "type": "registry:block", "title": "Dashboard 02", "description": "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.", "categories": [ "blocks", "dashboard" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "select", "separator", "https://hirael.com/r/sparkline.json" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/dashboard-02/dashboard-02.tsx", "type": "registry:block", "target": "components/blocks/dashboard-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/dashboard/dashboard-02" } } }, { "name": "dashboard-03", "type": "registry:block", "title": "Dashboard 03", "description": "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.", "categories": [ "blocks", "dashboard" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "card", "separator" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/dashboard-03/dashboard-03.tsx", "type": "registry:block", "target": "components/blocks/dashboard-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/dashboard/dashboard-03" } } }, { "name": "dashboard-04", "type": "registry:block", "title": "Dashboard 04", "description": "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.", "categories": [ "blocks", "dashboard" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "select", "https://hirael.com/r/sparkline.json" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/dashboard-04/dashboard-04.tsx", "type": "registry:block", "target": "components/blocks/dashboard-04.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/dashboard/dashboard-04" } } }, { "name": "dashboard-05", "type": "registry:block", "title": "Dashboard 05", "description": "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 is marked in the primary color and its pulse respects prefers-reduced-motion.", "categories": [ "blocks", "dashboard" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "select", "https://hirael.com/r/sparkline.json" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/dashboard-05/dashboard-05.tsx", "type": "registry:block", "target": "components/blocks/dashboard-05.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/dashboard/dashboard-05" } } }, { "name": "integrations-01", "type": "registry:block", "title": "Integrations 01", "description": "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 highlights the spoke you hover.", "categories": [ "blocks", "integrations" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/integrations-01/integrations-01.tsx", "type": "registry:block", "target": "components/blocks/integrations-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/integrations/integrations-01" } } }, { "name": "integrations-02", "type": "registry:block", "title": "Integrations 02", "description": "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 count.", "categories": [ "blocks", "integrations" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "spinner", "toggle-group" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/integrations-02/integrations-02.tsx", "type": "registry:block", "target": "components/blocks/integrations-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/integrations/integrations-02" } } }, { "name": "integrations-03", "type": "registry:block", "title": "Integrations 03", "description": "Two-column integrations page: a sticky intro with a request-an-integration popover form beside a ruled list of linked connectors and their status.", "categories": [ "blocks", "integrations" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "field", "input", "popover", "separator", "spinner" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/integrations-03/integrations-03.tsx", "type": "registry:block", "target": "components/blocks/integrations-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/integrations/integrations-03" } } }, { "name": "integrations-04", "type": "registry:block", "title": "Integrations 04", "description": "Centered integrations section: heading and copy above a hub with 6 linked tool tiles on straight spokes, with pulses travelling in and out along each line.", "categories": [ "blocks", "integrations" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/integrations-04/integrations-04.tsx", "type": "registry:block", "target": "components/blocks/integrations-04.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/integrations/integrations-04" } } }, { "name": "integrations-05", "type": "registry:block", "title": "Integrations 05", "description": "Centered integrations section with three source tools on one side and three targets on the other, joined to a central hub by curved paths that carry travelling pulses.", "categories": [ "blocks", "integrations" ], "dependencies": [ "lucide-react" ], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/blocks/integrations-05/integrations-05.tsx", "type": "registry:block", "target": "components/blocks/integrations-05.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/integrations/integrations-05" } } }, { "name": "integrations-06", "type": "registry:block", "title": "Integrations 06", "description": "Centered integrations section with a row of tool tiles hung on a shallow arc over a faded grid, each lifting on hover.", "categories": [ "blocks", "integrations" ], "dependencies": [ "lucide-react" ], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/blocks/integrations-06/integrations-06.tsx", "type": "registry:block", "target": "components/blocks/integrations-06.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/integrations/integrations-06" } } }, { "name": "integrations-07", "type": "registry:block", "title": "Integrations 07", "description": "Two-column integrations section with copy and a call to action beside a 3 by 3 tile grid whose featured tile cycles on its own, pauses on hover and focus, and can be picked directly.", "categories": [ "blocks", "integrations" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/integrations-07/integrations-07.tsx", "type": "registry:block", "target": "components/blocks/integrations-07.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/integrations/integrations-07" } } }, { "name": "integrations-08", "type": "registry:block", "title": "Integrations 08", "description": "Minimal integrations section: a short heading, a single row of tool icons and a link to the full list.", "categories": [ "blocks", "integrations" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/integrations-08/integrations-08.tsx", "type": "registry:block", "target": "components/blocks/integrations-08.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/integrations/integrations-08" } } }, { "name": "image-gallery-01", "type": "registry:block", "title": "Image Gallery 01", "description": "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 empty state for categories with no work yet.", "categories": [ "blocks", "image-gallery" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "empty", "https://hirael.com/r/lightbox.json", "tabs" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/image-gallery-01/image-gallery-01.tsx", "type": "registry:block", "target": "components/blocks/image-gallery-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/image-gallery/image-gallery-01" } } }, { "name": "image-gallery-02", "type": "registry:block", "title": "Image Gallery 02", "description": "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 it on close.", "categories": [ "blocks", "image-gallery" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/lightbox.json", "toggle-group" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/image-gallery-02/image-gallery-02.tsx", "type": "registry:block", "target": "components/blocks/image-gallery-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/image-gallery/image-gallery-02" } } }, { "name": "app-shell-01", "type": "registry:block", "title": "App Shell 01", "description": "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.", "categories": [ "blocks", "app-shell" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "card", "direction", "dropdown-menu", "empty", "input-group", "kbd", "separator", "sidebar", "table" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/app-shell-01/app-shell-01.tsx", "type": "registry:block", "target": "components/blocks/app-shell-01.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/app-shell/app-shell-01" } } }, { "name": "app-shell-02", "type": "registry:block", "title": "App Shell 02", "description": "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.", "categories": [ "blocks", "app-shell" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "https://hirael.com/r/copy-button.json", "dropdown-menu", "empty", "https://hirael.com/r/inline-edit.json", "input-group", "separator", "switch", "tabs" ], "cssVars": { "light": { "success": "oklch(0.527 0.154 150.069)", "warning": "oklch(0.555 0.163 48.998)", "info": "oklch(0.55 0.2 260)" }, "dark": { "success": "oklch(0.696 0.17 162.48)", "warning": "oklch(0.769 0.188 70.08)", "info": "oklch(0.62 0.19 260)" } }, "files": [ { "path": "registry/hirael/bases/radix/blocks/app-shell-02/app-shell-02.tsx", "type": "registry:block", "target": "components/blocks/app-shell-02.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/app-shell/app-shell-02" } } }, { "name": "app-shell-03", "type": "registry:block", "title": "App Shell 03", "description": "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.", "categories": [ "blocks", "app-shell" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "direction", "empty", "input-group", "separator", "tabs", "textarea", "tooltip" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/app-shell-03/app-shell-03.tsx", "type": "registry:block", "target": "components/blocks/app-shell-03.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/app-shell/app-shell-03" } } }, { "name": "app-shell-04", "type": "registry:block", "title": "App Shell 04", "description": "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 campaign board overview with a stat row and four stage columns.", "categories": [ "blocks", "app-shell" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "direction", "dropdown-menu", "input-group", "kbd", "separator", "sidebar" ], "files": [ { "path": "registry/hirael/bases/radix/blocks/app-shell-04/app-shell-04.tsx", "type": "registry:block", "target": "components/blocks/app-shell-04.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/blocks/app-shell/app-shell-04" } } }, { "name": "copy-button", "type": "registry:component", "title": "Copy Button", "description": "Click-to-copy button with copied feedback, icon-only or labelled, ghost / outline variants and a non-secure-context clipboard fallback.", "categories": [ "display" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/components/copy-button.tsx", "type": "registry:component", "target": "components/copy-button.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/copy-button" } } }, { "name": "icon-stack", "type": "registry:component", "title": "Icon Stack", "description": "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.", "categories": [ "display" ], "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/components/icon-stack.tsx", "type": "registry:component", "target": "components/icon-stack.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/icon-stack" } } }, { "name": "marquee", "type": "registry:component", "title": "Marquee", "description": "Infinite scrolling row or column for logos and testimonials, with pause-on-hover, reverse and vertical modes. Keyframes ship inline, zero config.", "categories": [ "display" ], "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/hirael/bases/radix/components/marquee.tsx", "type": "registry:component", "target": "components/marquee.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/marquee" } } }, { "name": "tree-view", "type": "registry:component", "title": "Tree View", "description": "Collapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus.", "categories": [ "data" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "collapsible", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/tree-view.tsx", "type": "registry:component", "target": "components/tree-view.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/data/tree-view" } } }, { "name": "animated-number", "type": "registry:component", "title": "Animated Number", "description": "Count-up number that tweens to its target with easing, Intl formatting (currency, compact, percent), prefix/suffix and reduced-motion support.", "categories": [ "data" ], "dependencies": [], "registryDependencies": [ "https://hirael.com/r/use-reduced-motion.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/animated-number.tsx", "type": "registry:component", "target": "components/animated-number.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/data/animated-number" } } }, { "name": "stepper", "type": "registry:component", "title": "Stepper", "description": "Multi-step progress indicator with horizontal and vertical orientation, completed / active / inactive states, clickable steps and a compound API.", "categories": [ "navigation" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/stepper.tsx", "type": "registry:component", "target": "components/stepper.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/navigation/stepper" } } }, { "name": "sortable", "type": "registry:component", "title": "Sortable", "description": "Drag-to-reorder list on dnd-kit: pointer and keyboard sorting, handle or whole-item dragging, and controls inside items that stay clickable.", "categories": [ "data" ], "dependencies": [ "@dnd-kit/core", "@dnd-kit/sortable", "@dnd-kit/utilities", "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/sortable.tsx", "type": "registry:component", "target": "components/sortable.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/data/sortable" } } }, { "name": "date-picker", "type": "registry:component", "title": "Date Picker", "description": "Single-date picker: a trigger that formats the date, opening shadcn Calendar in a popover. Takes react-day-picker matchers for bounds and disabled days.", "categories": [ "pickers" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "calendar", "popover", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/date-picker.tsx", "type": "registry:component", "target": "components/date-picker.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/pickers/date-picker" } } }, { "name": "date-range-picker", "type": "registry:component", "title": "Date Range Picker", "description": "Range picker on shadcn Calendar: preset column, one or two months, and react-day-picker matchers for bounds and disabled days.", "categories": [ "pickers" ], "dependencies": [ "lucide-react", "react-day-picker" ], "registryDependencies": [ "button", "calendar", "popover", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/date-range-picker.tsx", "type": "registry:component", "target": "components/date-range-picker.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/pickers/date-range-picker" } } }, { "name": "mention-input", "type": "registry:component", "title": "Mention Input", "description": "@-mention textarea with caret-anchored autocomplete, highlighted mention chips, async search and multiple trigger characters.", "categories": [ "inputs" ], "dependencies": [], "registryDependencies": [ "https://hirael.com/r/compose-refs.json", "spinner", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/mention-input.tsx", "type": "registry:component", "target": "components/mention-input.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/mention-input" } } }, { "name": "rich-text-editor", "type": "registry:component", "title": "Rich Text Editor", "description": "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.", "categories": [ "inputs" ], "dependencies": [ "@tiptap/core", "@tiptap/extension-highlight", "@tiptap/extension-placeholder", "@tiptap/extension-text-align", "@tiptap/pm", "@tiptap/react", "@tiptap/starter-kit", "lucide-react" ], "registryDependencies": [ "button", "input", "popover", "separator", "skeleton", "toggle", "tooltip" ], "docs": "Pulls in Tiptap's editor engine (seven @tiptap/* packages), so expect a heavier bundle than the other input components.", "files": [ { "path": "registry/hirael/bases/radix/components/rich-text-editor.tsx", "type": "registry:component", "target": "components/rich-text-editor.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/rich-text-editor" } } }, { "name": "inline-edit", "type": "registry:component", "title": "Inline Edit", "description": "Click-to-edit text with preview, validation, async submit and confirm/cancel controls. Input and textarea modes.", "categories": [ "inputs" ], "dependencies": [ "@radix-ui/react-slot", "lucide-react" ], "registryDependencies": [ "button", "https://hirael.com/r/compose-refs.json", "input", "spinner", "textarea", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/inline-edit.tsx", "type": "registry:component", "target": "components/inline-edit.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/inline-edit" } } }, { "name": "signature-pad", "type": "registry:component", "title": "Signature Pad", "description": "Signature capture on signature_pad: smooth ink, per-stroke undo, ink that follows the theme, and PNG/JPEG export via ref.", "categories": [ "inputs" ], "dependencies": [ "lucide-react", "signature_pad" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/hirael/bases/radix/components/signature-pad.tsx", "type": "registry:component", "target": "components/signature-pad.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/inputs/signature-pad" } } }, { "name": "image-cropper", "type": "registry:component", "title": "Image Cropper", "description": "Pan-and-zoom image cropper on react-easy-crop: rect or round mask, fixed aspect, zoom slider and canvas export via ref.", "categories": [ "files" ], "dependencies": [ "react-easy-crop" ], "registryDependencies": [ "slider", "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/image-cropper.tsx", "type": "registry:component", "target": "components/image-cropper.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/files/image-cropper" } } }, { "name": "image-compare", "type": "registry:component", "title": "Image Compare", "description": "Before/after comparison slider with a draggable, keyboard-accessible divider, horizontal or vertical orientation and hover-follow mode.", "categories": [ "display" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/compose-refs.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/image-compare.tsx", "type": "registry:component", "target": "components/image-compare.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/image-compare" } } }, { "name": "lightbox", "type": "registry:component", "title": "Lightbox", "description": "Fullscreen image lightbox on Radix Dialog with gallery navigation, zoom and pan, swipe gestures, captions and a thumbnail strip.", "categories": [ "display" ], "dependencies": [ "@radix-ui/react-dialog", "lucide-react" ], "registryDependencies": [ "https://hirael.com/r/use-controllable-state.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/lightbox.tsx", "type": "registry:component", "target": "components/lightbox.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/display/lightbox" } } }, { "name": "countdown-timer", "type": "registry:component", "title": "Countdown Timer", "description": "Count-down-to-date timer with boxed / inline / minimal variants, a useCountdown hook, digit animation and completion content.", "categories": [ "data" ], "dependencies": [], "registryDependencies": [ "https://hirael.com/r/use-reduced-motion.json" ], "files": [ { "path": "registry/hirael/bases/radix/components/countdown-timer.tsx", "type": "registry:component", "target": "components/countdown-timer.tsx" } ], "meta": { "links": { "docs": "https://hirael.com/components/data/countdown-timer" } } }, { "name": "relative-time", "type": "registry:component", "title": "Relative Time", "description": "Live \"3 minutes ago\" label on a semantic