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:T1360,"use client" // next import Link from "next/link" // shadcn import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion" // project-imports import branding from "@/branding.json" import SectionHeader from "@/components/uiable/blocks/landing/components/SectionHeader" const faqItems = [ { number: "1.", question: "Is everything free, or is there a paid version?", answer: ( <> The Community tier is completely free and MIT-licensed — no account required. Pro plans are a one-time purchase that unlocks every pro block, premium template, and full dashboard app, with lifetime access and a year of updates. See{" "} pricing {" "} for what's included. ), }, { number: "2.", question: `How are ${branding.brandName} components different from shadcn/ui?`, answer: `Shadcn/ui provides the core components like Buttons, Dialogs, Alerts, and Badges. ${branding.brandName} builds on top of them with production-ready, fully styled components like animated buttons, searchable comboboxes, date pickers, advanced sidebars, and more. You get the flexibility of shadcn/ui with ready-to-use components that are easier to copy, customize, and ship.`, }, { number: "3.", question: "Which frameworks and setups are supported?", answer: `${branding.brandName} is built for Next.js 16+ with React 19 and Tailwind CSS v4. Every component is built on Tailwind CSS and Base UI and ships as fully-typed TypeScript.`, }, { number: "4.", question: "How do I add a component to my project?", answer: ( <> Copy the code straight from any{" "} component {" "} page, or install it with the shadcn CLI. Pro components install the same way using your personal registry token. ), }, { number: "5.", question: "Are the components accessible?", answer: `Yes. They're built on Base UI primitives with keyboard navigation, correct ARIA roles, and focus management, and are tested against WCAG and ARIA guidelines.`, }, { number: "6.", question: `Is ${branding.brandName} actively maintained?`, answer: `Yes — components and blocks get regular updates and new additions. Pro purchases include one year of updates, which you can extend anytime from your account.`, }, { number: "7.", question: "How do I get help or report a bug?", answer: ( <> Community support is on{" "} Discord {" "} and{" "} GitHub . Pro customers also get priority support. ), }, ] // ------------------------------ | FAQ | ------------------------------ // export default function FAQ() { return (

{faqItems.map((item, index) => ( {item.number} {item.question} {item.answer} ))}

) } 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","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L4e",null,{"namespace":"@uiable","registryDependencies":["@uiable/accordion"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/uiable/blocks/landing/faq/faq.tsx","content":"$50","type":"registry:component","target":"@components/uiable/blocks/landing/faq/faq.tsx"},{"path":"src/branding.json","content":"{\n \"brandName\": \"UIAble\",\n \"title\": \"Components to Complete Interfaces\",\n \"company\": {\n \"name\": \"CodedThemes \",\n \"url\": \"https://codedthemes.com/\",\n \"socialLink\": {\n \"linkedin\": \"https://in.linkedin.com/company/codedthemes\",\n \"x\": \"https://x.com/uiable\",\n \"instagram\": \"#\",\n \"github\": \"https://github.com/codedthemes/uiable\",\n \"discord\": \"https://discord.com/invite/txPuEn5atw\",\n \"support\": \"https://codedthemes.support-hub.io/\"\n }\n },\n \"logo\": {\n \"main\": \"\",\n \"logoIcon\": \"\",\n \"logoFab\": \"\",\n \"logoWatermark\": \"\"\n }\n}\n","type":"registry:file","target":"src/branding.json"},{"path":"src/components/uiable/blocks/landing/components/SectionHeader.tsx","content":"// third-party\nimport { cn } from \"cn\"\n\n// types\ninterface SectionHeaderProps {\n title: string\n subtitle: string\n className?: string\n titleClassName?: string\n subtitleClassName?: string\n}\n\n// ------------------------------ | BLOCK - SECTION HEADER | ------------------------------ //\n\nexport default function SectionHeader({\n title,\n subtitle,\n className,\n titleClassName,\n subtitleClassName,\n}: SectionHeaderProps) {\n return (\n

\n \n {title}\n \n\n \n {subtitle}\n

\n )\n}\n","type":"registry:component","target":"@components/uiable/blocks/landing/components/SectionHeader.tsx"}],"className":"h-[70svh] min-h-80"}]]}]