# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/faq93. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [FAQ](/blocks/faq)
5. /
6. Always-Open Question Grid

# Always-Open Question Grid[PRO](/pricing)

A two-column question grid with every answer already visible on a hairline, so nothing is behind a toggle, closed by a soft panel pointing at a direct reply.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/faq93`

## Faq93: Always-Open Question Grid

A two-column question grid with every answer already visible on a hairline, so nothing is behind a toggle, closed by a soft panel pointing at a direct reply.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/faq93?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/faq93?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/faq93.tsx` and the `badge6` component it uses for the eyebrow (installed to `components/beste/component/badge6.tsx`).

### Quick start

The installed file exports `faq93Demo` alongside the block: the exact props behind the preview above. Spread it to get a working question grid in one line.

tsxCopy

```
import { Faq93, faq93Demo } from "@/components/beste/block/faq93";

export default function FaqPage() {
  return <Faq93 {...faq93Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Faq93 } from "@/components/beste/block/faq93";

export default function FaqPage() {
  return (
    <Faq93
      eyebrow="Before you subscribe"
      heading="The questions readers actually send us"
      description="Everything on this page is answered in the open."
      questions={[
        {
          question: "How often does it arrive?",
          answer: "Once a week, Tuesday morning, and never twice in the same week.",
        },
        {
          question: "Is any of it sponsored?",
          answer: "No. There are no ads, no affiliate links and no paid mentions.",
        },
      ]}
      supportText="Something we have not covered here?"
      supportLink={{ label: "Write to us directly", href: "/contact" }}
    />
  );
}
```

### Props

| Prop        | Type             | Default | Description                             |
| ----------- | ---------------- | ------- | --------------------------------------- |
| eyebrow     | string           | –       | Badge6 label above the hairline rule    |
| heading     | string           | –       | Section heading under the rule          |
| description | string           | –       | Supporting paragraph                    |
| questions   | QuestionItem\[\] | \[\]    | Question and answer pairs, two to a row |
| supportText | string           | –       | Line in the panel under the grid        |
| supportLink | SupportLink      | –       | Link beside that line                   |
| className   | string           | –       | Extra classes for the outer section     |

tsCopy

```
type QuestionItem = {
  question: string;
  answer: string;
};

type SupportLink = {
  label: string;
  href: string;
};
```

### Behavior notes

* There is no accordion and no state. Every answer is in the markup and on screen, which is the point of the block: six short answers are faster to read than six things to open.
* Questions are `h3` elements, so the page keeps a heading outline a screen reader can jump through.
* The grid is two columns from `md` up with a wide `gap-x-16`, so the two columns read as separate lists rather than as a table.
* The support panel renders when either its line or its link is passed, so it can be a link alone.

## More FAQ blocks

[View all FAQ](/blocks/faq)

[](/block/faq80)

FREE

faq80

### Two Column Answer Grid

An always-open FAQ laid out as a two-column grid of numbered, hairline-separated question and answer entries, closing with a soft support panel that pairs a short prompt with two actions.

[](/block/faq17)

PRO

faq17

### Two Column Q&A

Questions on left, answers on right in a two-column grid layout. Works well for balanced, side-by-side presentation.

[](/block/faq74)

PRO

faq74

### FAQ Cards

Always-open FAQ presented as a scannable grid of Q&A cards.

[](/block/faq9)

PRO

faq9

### Three Column Grid

Q&A pairs arranged in a responsive grid layout. Ideal for displaying concise answers in a scannable, multi-column format.

[](/block/faq91)

PRO

faq91

### Ask And Answered In Public

An open question FAQ pairing a soft panel that sticks while you scroll, holding a working question and email form, with the questions others sent recently answered as linked hairline entries.

[](/block/faq39)

PRO

faq39

### Slide-Out Panels

Questions that slide open to reveal answers with bottom border separator. Smooth reveal animation.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.