Vue faq blocks.

The 100 FAQ blocks are page sections that answer common questions before anyone asks: accordions, searchable lists, categorised tabs, side navigation, contact prompts and help-centre layouts. Each holds its questions in a typed array in the file.

They fall into 14 groups: Accordion lists, Cards and grids, Navigation, Search, Topics and filters, Ways to reveal, and more. Some change how answers are revealed (hover, toggle all, infinite scroll), others add structure such as tabs and topic filters, or things beside the answers like a contact card, votes or a last-reviewed date.

Accordion FAQ is the simple one: side header and an accordion of questions. Live Search FAQ filters rows as you type and marks the matches. Categorized FAQ puts a tab per topic with its question count. FAQ with Contact Card keeps a contact card in view while the questions scroll.

Questions and answers sit in a typed array (usually named QUESTIONS or FAQS, each with an id, question and answer) at the top of the file, followed by the component that renders them. The product named in the copy is a placeholder.

Two blocks ship the markup. JSON-LD FAQ builds one FAQPage script from the same FAQS array that draws the visible list, and escapes the less-than character in the JSON. Schema Inspector FAQ does the same and also shows the JSON tree with a copy button. The other blocks emit none, so copy that script and its builder into any block you use.

Edit the questions array: each item has an answer, an id and a question, and the accordion maps over it. In the searchable and categorised blocks the same array also feeds the filter and the tab counts, so there is nothing else to update. Keep one source for the visible text and the schema so they stay identical.

Replace the inline array with your data: import a typed list from a file or CMS in a server component and pass it down as a prop, or fetch it where you render the block. Keep the same fields (question, answer, id) and the component code does not change.

Live Search FAQ already filters on the question and the answer text, opens every match, marks the matched words and shows an empty state with a reset. Answer Finder FAQ is not AI: it scores your words against the questions it holds and says so, so wire your own search or model call if you want one.

Support Ticket FAQ suggests matching questions as the subject is typed, then sends the ticket through a submit function that does nothing here: wire that function to your help desk. FAQ with Contact Card is only a card of ways to reach a person, so put your own email, chat and phone details in it.

This page lists 100 of the category's 100 faq blocks for Vue. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Vue faq blocks are the React ones ported to Vue, on Ark UI's Vue primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-vue (/r/vue/faq-accordion.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Vue needs vue @ark-ui/vue lucide-vue-next installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-vue@latest add` with the block's registry URL, such as /r/vue/faq-accordion.json for Accordion FAQ. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of faq block, led by calculators and tools (11), accordion lists (9), charts and documents (9) and reading and sharing (9), and sort by popular or name. A good first look: Accordion FAQ, Answer Finder FAQ and Animated Counter FAQ. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a faq block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layouts, finding answers and what it shows kinds.

Open its page and use the full-screen viewer (/view/faq/vue/accordion) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each faq block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the faq blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 faq blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a faq block, read it with get_block and install it on your Vue stack.

Pass `category: "faq"` to search_blocks to search only the 100 faq blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "faq", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.