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:T22b4,// Searchable FAQ from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { ArrowUpRight, LifeBuoy, Mail, Search, SearchX } 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'; import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '@/registry/hirael/bases/radix/ui/empty'; import { InputGroup, InputGroupAddon, InputGroupInput } from '@/registry/hirael/bases/radix/ui/input-group'; import { Tabs, TabsList, TabsTrigger } from '@/registry/hirael/bases/radix/ui/tabs'; 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 SWAP = 'animate-in fade-in slide-in-from-bottom-1 duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none'; const stagger = (index: number, step = 60): React.CSSProperties => ({ animationDelay: `${index * step}ms` }); type Category = 'getting-started' | 'billing' | 'licensing'; const CATEGORIES: { value: Category | 'all'; label: string }[] = [ { value: 'all', label: 'All' }, { value: 'getting-started', label: 'Getting started' }, { value: 'billing', label: 'Billing' }, { value: 'licensing', label: 'Licensing' }, ]; const CATEGORY_LABELS: Record = { 'getting-started': 'Getting started', billing: 'Billing', licensing: 'Licensing', }; const FAQS: readonly { q: string; a: string; category: Category }[] = [ { q: 'How do I install my first block?', a: "Run the shadcn CLI with the block's registry URL; the source lands in components/blocks/ and is yours to edit. No package to add, nothing to configure.", category: 'getting-started', }, { q: 'Do blocks work without the rest of Hirael?', a: 'Yes. Each block declares its own dependencies, and the CLI resolves only what that block needs. You can install a single FAQ section into an existing app.', category: 'getting-started', }, { q: 'Which frameworks are supported?', a: 'Anywhere React runs: Next.js App or Pages Router, Remix, Vite. Blocks avoid framework-specific APIs unless the block page says otherwise.', category: 'getting-started', }, { q: 'Is there a paid tier?', a: 'Everything currently published is free. If a pro tier ships later, existing blocks stay free and installed copies are unaffected.', category: 'billing', }, { q: 'Do you offer team invoicing?', a: "There's nothing to invoice today; installs are free and unmetered. For procurement paperwork, contact us and we'll sort something out.", category: 'billing', }, { q: 'Can I use blocks in client work?', a: "Yes. Copies installed into a client project belong to that codebase. There's no per-seat or per-project license to track.", category: 'licensing', }, { q: 'Can I republish blocks as my own library?', a: "Shipping products with blocks inside is encouraged; repackaging the registry itself as a competing collection isn't. When in doubt, ask.", category: 'licensing', }, { q: 'Do I need to credit Hirael?', a: 'No attribution required. A mention is appreciated but never a condition of use.', category: 'licensing', }, ]; const Faq03 = () => { const [query, setQuery] = React.useState(''); const [category, setCategory] = React.useState('all'); const normalized = query.trim().toLowerCase(); const visible = FAQS.filter((f) => { if (category !== 'all' && f.category !== category) return false; if (!normalized) return true; return f.q.toLowerCase().includes(normalized) || f.a.toLowerCase().includes(normalized); }); const clearFilters = () => { setQuery(''); setCategory('all'); }; return (

Help center

Find the answer before you file the issue.

Search the questions we hear most, or narrow by topic. Anything unanswered lands in the inbox below.

setQuery(e.target.value)} placeholder="Search questions…" aria-label="Search questions" /> setCategory(v as Category | 'all')} className="w-full items-center" > {CATEGORIES.map((c) => ( {c.label} ))}

{visible.length > 0 ? (

{visible.map((f) => ( {f.q} {CATEGORY_LABELS[f.category]} {f.a} ))}

) : ( No matching questions Nothing matches “{query.trim()}” {category !== 'all' ? ` in ${CATEGORY_LABELS[category as Category]}` : ''}. Try different keywords or clear the filters. )}

Still stuck? We answer most questions within a day.

); }; export default Faq03; 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","empty","input-group","tabs"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/blocks/faq-03/faq-03.tsx","content":"$50","type":"registry:block","target":"components/blocks/faq-03.tsx"}],"className":"h-[70svh] min-h-80"}]]}]