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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | string | none | Small eyebrow label above the heading. |
| heading | string | none | Section heading. |
| description | string | none | Section intro text. |
| formHeading | string | "Ask something" | Heading inside the sticky ask panel. |
| submitLabel | string | "Send question" | Label on the inert submit button. |
| answered | AnsweredEntry[] | none | Recently answered questions rendered as hairline rows. |
| className | string | none | Extra 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.
More FAQ Blocks
View all →collapsible-accordion
Collapsible Accordion
Stacked cards with expandable sections, for full-length answers in a compact format.
open-list-layout
Open List Layout
Questions with answers displayed directly below in a simple always-open list.
three-column-grid
Three Column Grid
Q&A pairs arranged in a responsive grid layout, always open.
tabbed-categories
Tabbed Categories
Sidebar navigation with category tabs and an accordion of that category's questions.
searchable-accordion
Searchable Accordion
Search input that filters accordion items in real-time by question and answer text.
grouped-sections
Grouped Sections
FAQs organized into titled sections, each with its own independent accordion below it.