Question CardProv1.0.0
An agent asks before it goes on: pick one option or several, write your own under Other, or answer in words. Number keys choose, Enter sends, and the card folds to your answer with Change to reopen it.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-question-cardNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Several answers
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { QuestionCard } from "@/components/ui/lumen/controls/question-card";
export function DeployQuestion({ reply }: { reply: (answer: string) => void }) {
return (
<QuestionCard
question="Where should I deploy this build?"
description="Production needs a second approval."
options={[
{ value: "preview", label: "Preview", description: "A link for this branch only" },
{ value: "staging", label: "Staging" },
{ value: "production", label: "Production" },
]}
allowOther
onAnswer={({ values, text }) => reply(text ?? values[0] ?? "")}
onSkip={() => reply("skip")}
/>
);
}Props
question / description–ReactNodeWhat it asks, and why.
options–QuestionOption[] ({ value, label, description? })Without options the answer is free text.
multiplefalsebooleanSeveral options can be chosen.
allowOtherfalsebooleanAdd Other, with a field for the person's own answer.
answer / defaultAnswer / onAnswer–QuestionAnswer | null ({ values, text? })Controlled or not. Once answered, the card folds to the answer.
onSkip–() => voidShows Skip.
Show all 8 propsShow fewer
lockedfalsebooleanNo Change once answered (the agent already moved on).
labels–Partial<QuestionCardLabels>Every word on the card, for other languages.
Source
components/ui/lumen/controls/question-card.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
