4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1502,// Sticky Numbered FAQ from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael import type * as React from 'react'; import { ArrowUpRight, MessageCircleQuestion } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/registry/hirael/bases/radix/ui/accordion'; import { Button } from '@/registry/hirael/bases/radix/ui/button'; const ENTER = 'animate-in fade-in slide-in-from-bottom-4 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none'; const stagger = (index: number, step = 60, offset = 0): React.CSSProperties => ({ animationDelay: `${offset + index * step}ms`, }); const FAQS = [ { q: 'How is Hirael different from shadcn/ui?', a: 'Hirael is a peer, not a replacement. shadcn/ui covers the core primitives: Button, Dialog, Select. Hirael ships the components most products still end up building by hand: multi-select, tag input, year picker, an async combobox, password strength. Both use the same CLI and the same install URL pattern, so you can mix them freely.', }, { q: 'Is Hirael a dependency I install?', a: 'No. Hirael is a registry, not a package. The shadcn CLI copies the component source into your repo under components/ui. You own the code, you can edit it, and nothing at runtime depends on Hirael.', }, { q: 'How is a component put together?', a: 'As a set of composable parts, the same way shadcn primitives work. The root holds state, and parts such as the trigger, content and items handle layout. A few components also take a shorter options prop for the common case, but the parts always come first.', }, { q: 'Can I theme it?', a: 'Yes. Hirael reads the same CSS variables as shadcn/ui, so any shadcn theme works as is. Change a token and every installed component picks it up.', }, { q: 'Does it work with React Server Components?', a: "Yes. Components that need interactivity are marked 'use client' at the top of their file, and static ones render on the server. Both work in the App Router and the Pages Router.", }, { q: 'Is it ready for production?', a: 'Every published component is typed end to end, works from the keyboard, and renders safely on the server. A component is not listed until it has focus handling and a working demo in the registry.', }, ] as const; const Faq01 = () => { return (

Before you install

Frequently unobvious questions.

The questions teams ask in their first ten minutes with Hirael, answered the way we'd want them answered. If something isn't here, the issue tracker is open.

Still stuck?

Drop a question in the repo. Most get a reply within a day.

{FAQS.map((f, i) => ( {String(i + 1).padStart(2, '0')} {f.q}

{f.a}

))}

); }; export default Faq01; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hirael","registryDependencies":["https://hirael.com/r/accordion.json","button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/blocks/faq-01/faq-01.tsx","content":"$50","type":"registry:block","target":"components/blocks/faq-01.tsx"}],"className":"h-[70svh] min-h-80"}]]}]