Ask And Answered In Public

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.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

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

Base UI flavor

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

This installs the block to components/beste/block/faq91.tsx, the shadcn/ui input and textarea components it depends on, and the badge23 and button21 components it uses for the eyebrow and the submit action.

Quick start

The installed file exports faq91Demo alongside the block: the exact props behind the preview above. Spread it to get a working page in one line.

import { Faq91, faq91Demo } from "@/components/beste/block/faq91";

export default function AskPage() {
  return <Faq91 {...faq91Demo} />;
}

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

import { Faq91 } from "@/components/beste/block/faq91";

export default function AskPage() {
  return (
    <Faq91
      badge={{ label: "Ask us anything" }}
      heading="If it is not answered yet, ask and we will publish the answer"
      description="Questions go to an engineer, not a marketing inbox."
      formTitle="Your question"
      form={{
        questionLabel: "What do you need to know",
        questionPlaceholder: "For example: what happens to our data if you are acquired?",
        emailLabel: "Where should the answer go",
        emailPlaceholder: "[email protected]",
        submitLabel: "Send the question",
        finePrint: "We answer within one working day and never add you to a mailing list.",
      }}
      listTitle="Asked recently, answered in public"
      questions={[
        {
          question: "What happens to our data if you are acquired?",
          answer: "The data processing agreement survives a change of control.",
          askedBy: "A group of four clinics, May 2026",
          href: "/answers/acquisition",
        },
        {
          question: "Do you train models on our member records?",
          answer: "No, and the contract says so.",
          askedBy: "A practice manager, May 2026",
          href: "/answers/training",
        },
      ]}
    />
  );
}

Props

type AskForm = {
  questionLabel: string;
  questionPlaceholder: string;
  emailLabel: string;
  emailPlaceholder: string;
  submitLabel: string;
  finePrint: string;
};

type AskedQuestion = {
  question: string;
  answer: string;
  askedBy: string;
  href: string;
};

Behavior notes

• The form panel is lg:sticky lg:top-24 lg:self-start. The self-start is required: without it the panel stretches to the full grid row height and sticky positioning has nothing to travel within. Adjust top-24 to match your own fixed header.
• Sticky is lg and above only. Below that the form scrolls normally and lands above the answered questions.
• Both fields are shadcn/ui components, Textarea and Input, which is why both appear in the block's registry dependencies. Field ids come from useId, so labels stay correctly associated with several instances on one page.
• Both fields carry bg-background explicitly, since they sit on a bg-muted panel and would otherwise blend into it.
• The form is uncontrolled and holds no state. There is no onSubmit, so the send call is wired by the integrator.
• askedBy is deliberately an attribution rather than a name field. The demo credits roles rather than individuals, which is what lets the page be public without asking permission for each entry.
• Quotation marks around the question are added by the block as entities, so pass plain text.
• Each answered entry is a whole Link with a hover fill and md:px-4, so the row highlight extends slightly past the text on wider screens.