Staaarter

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.

By Staaarter Team
FAQ
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, input, label, textarea dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/ask-and-answered-in-public.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq91.tsx instead.

Usage

The file also exports faq91Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq91, faq91Demo } from "@/components/blocks/faq/faq91";

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

Props

PropTypeDefaultDescription
badgestringnoneSmall eyebrow label above the heading.
headingstringnoneSection heading.
descriptionstringnoneSection intro text.
formHeadingstring"Ask something"Heading inside the sticky ask panel.
submitLabelstring"Send question"Label on the inert submit button.
answeredAnsweredEntry[]noneRecently answered questions rendered as hairline rows.
classNamestringnoneExtra classes for the outer section element.

Types

type AnsweredEntry = {
  question: string;
  answer: string;
};

Behavior notes

  • "use client" because the ask panel is a controlled form: the question textarea and email input both hold real local state as you type.
  • The ask panel sticks to the viewport (lg:sticky lg:top-24) while the answered list scrolls beside it on large screens.
  • The submit button is inert by design: there is no backend to send a question to, so it never fires a real request. This is called out here rather than wired to a fake success state.
  • Recently answered entries render fully expanded as hairline-divided rows; there is no accordion collapse on this list, which keeps the whole feed scannable at a glance.