81 Pro components and page blocks

Get Pro
uibrik

Mesh FAQ

Pro

Preview

Customize

One at a time
Radius28px
Open on load0

Installation

Pro

Mesh FAQ is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/mesh-faq

Usage

import { MeshFaq } from "@/components/uibrik/mesh-faq/mesh-faq";​const items = [  { question: "What do I get with a license?", answer: "Every component in the library, the source to edit freely, and all updates for as long as the library exists. One payment, no subscription." },  { question: "Can I use the components in client work?", answer: "Yes. Use them in as many personal and client projects as you like. The only thing you can't do is resell the components themselves as a kit." },  // …3 more];​const palette = ["#6366f1", "#f97316", "#10b981", "#ec4899", "#0ea5e9", "#8b5cf6"];​<MeshFaq  items={items}  type="single"  radius={28}  interactive  defaultOpen={0}  palette={palette}/>

Props

MeshFaq
type
Type "single" | "multiple"
"single"
Opening one closes the others, or each opens on its own.
radius
Type number
28
Corner radius of each card.
interactive
Type boolean
true
The open card's paint follows the pointer: it drags and swirls under it.
defaultOpen
Type number
0
Index of the question open on mount. -1 for none.
itemsrequired
Type { question; answer; color? }[]
–
Questions in order. Each can have its own colour; otherwise the palette is used in turn.
palette
Type string[]
indigo, orange, emerald, pink, sky, violet
Colours handed to questions without their own.
className
Type string
–
Classes for the list.