1

Numbered

An open FAQ grid with every answer visible: up to three columns, each answer under a hairline rule with a plain two digit number, and the contact line beside the heading.

Dependencies

motion@hugeicons/react@hugeicons/core-free-icons

Interaction Type

A labelled section landmark with every answer visible, so there is nothing to open. Questions are headings in a list under hairline rules, each with an id for deep links, and markers are hidden from screen readers.

Props

Options you can pass to customize this component.

Prop
Type
Description
title
ReactNode

Section heading. Defaults to "Frequently asked questions".

description
ReactNode

Supporting text under the heading.

items
{ value: string; question: string; answer: ReactNode }[]

Questions and answers, numbered in order.

contactText
ReactNode

Text before the contact link. Defaults to "Cannot find what you need?".

contactLabel
string

Contact link text. Defaults to "Write to the team". Empty hides the line.

contactHref
string

Where the contact link points.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/faq-numbered.json

How to use

<FaqNumbered
  items={[
    { value: 'refunds', question: 'Can I get a refund?', answer: 'Yes, within 30 days.' },
  ]}
  contactHref="/contact"
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app

Frequently asked questions

Installing, theming and licensing, in short answers.

Cannot find what you need? Write to the team

  • How do I install a component?

    Run the add command shown on its page. The source is copied into your project, so every line is yours to read and change.

  • Do I need Tailwind CSS?

    Yes. Components are styled with Tailwind v4 utilities and read every color from CSS variables, so they follow your own tokens.

  • Does it support dark mode?

    Every component reads semantic tokens that switch under a .dark class on a parent. No component needs its own dark mode code.

  • Are the components accessible?

    They use semantic HTML, full keyboard support and visible focus rings, and they respect reduced motion. Each page lists its keyboard interactions.

  • Can I use it in a commercial product?

    Yes. The code is MIT with the Commons Clause: ship your own products with it, just do not resell the components themselves as a kit.

  • How do updates work?

    The code lives in your project, so nothing changes on its own. Run the add command again to pull a newer version and review the diff.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/faq-numbered.json