usage examples — shadcn/ui

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

HoverCard import statement

Import HoverCard and HoverCardTrigger from @/components/ui/hover-card: import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card"

HoverCard basic usage example

Basic usage example of HoverCard: ```tsx <HoverCardTrigger> <Button variant="link">Hover</Button> <HoverCard> The React Framework – created and maintained by @vercel. </HoverCard> </HoverCardTrigger> ```

HoverCard trigger delay example

Example of using delay and closeDelay on HoverCardTrigger: ```tsx <HoverCardTrigger delay={100} closeDelay={200}> <Button variant="link">Hover</Button> <HoverCard>Content</HoverCard> </HoverCardTrigger> ```

HoverCard placement example

Example of using the placement prop on HoverCard: ```tsx <HoverCardTrigger> <Button variant="link">Hover</Button> <HoverCard placement="top">Content</HoverCard> </HoverCardTrigger> ```

Questionnaire import statements

The following components can be imported from @/components/ui/questionnaire: Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle.

Questionnaire basic usage example

Example showing basic Questionnaire usage with items, title, description, choices, and actions: const items = [ { name: "direction", required: true, prompt: "What should we prototype next?", description: "Choose a direction or write your own.", choices: [ { value: "delegation", label: "Delegation", description: "Show how work moves to a specialist.", }, { value: "questions", label: "Question prompts", description: "Show choices while the interface waits.", }, { value: "both", label: "Both together" }, ], input: { label: "Another answer", placeholder: "Type another answer…" }, }, { name: "detail", required: false, prompt: "How much detail should it include?", description: "Skip this if you are not sure yet.", choices: [ { value: "focused", label: "Focused" }, { value: "complete", label: "Complete flow" }, ], }, ] as const <Questionnaire items={items} onSubmit={handleSubmit}> <QuestionnaireProgress /> {items.map((question) => ( <QuestionnaireItem key={question.name} name={question.name} required={question.required} > <QuestionnaireTitle>{question.prompt}</QuestionnaireTitle> <QuestionnaireDescription> {question.description} </QuestionnaireDescription> <QuestionnaireChoices> {question.choices.map((choice) => ( <QuestionnaireChoice key={choice.value} value={choice.value}> <span className="font-medium">{choice.label}</span> {"description" in choice ? ( <span className="text-muted-foreground"> {choice.description} </span> ) : null} </QuestionnaireChoice> ))} {"input" in question ? ( <QuestionnaireInput aria-label={question.input.label} placeholder={question.input.placeholder} /> ) : null} </QuestionnaireChoices> <QuestionnaireError /> </QuestionnaireItem> ))} <QuestionnaireActions> <QuestionnairePrevious /> <QuestionnaireSkip /> <QuestionnaireNext /> <QuestionnaireSubmit /> </QuestionnaireActions> </Questionnaire> function handleSubmit(event: React.FormEvent<HTMLFormElement>) { event.preventDefault() const answers = new FormData(event.currentTarget) // answers.get("direction"), answers.getAll(...) for multiple items. }