Skip to main content
Clever Ops

Gentle Health FAQ

Patient FAQ in a reassuring register, honest plain-language answers to questions like will it hurt, real disclosure semantics over calm hairline rows, and an ask-us-directly phone fallback.

Preview & code

Loading Gentle Health FAQ preview

Installation

pnpm dlx shadcn@latest add @cleverui/health-faq-gentle

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { HealthFaqGentle } from '@/components/blocks/health-faq-gentle'
Exampletsx
'use client'

import { HealthFaqGentle } from '@/components/blocks/health-faq-gentle'

export default function HealthFaqGentleDemo() {
  return (
    <HealthFaqGentle
      heading="Questions patients ask"
      intro="If you're wondering it, someone has already asked, here are our honest answers."
      items={[
        {
          question: 'Will it hurt?',
          answer:
            'A little, briefly. Most people describe it as a firm pinch, and we numb the area first. Tell us if you feel more than that, we can pause at any time.',
        },
        {
          question: 'How long will my appointment take?',
          answer: [
            'A standard consult is about 15 minutes. Longer if we need to examine something carefully, write a referral, or talk through a new diagnosis.',
            'If you know you need more time, several concerns, a mental health plan, book a double appointment when you call.',
          ],
        },
        {
          question: 'Do I need a referral to see you?',
          answer:
            'No referral is needed for a GP visit. If we refer you to a specialist or allied health, we write that letter for you and send a copy to your inbox.',
        },
        {
          question: 'What should I bring?',
          answer:
            'Your Medicare card if you have one, a list of current medicines, and any recent results or letters. If this is your first visit, arrive five minutes early for a short intake form.',
        },
        {
          question: 'Is bulk billing available?',
          answer:
            'We bulk bill children under 16, pension and concession card holders, and healthcare card holders for standard consults. Other visits may have a gap, reception can quote the fee before you book.',
        },
      ]}
      fallback={{
        note: "Can't find your question? Ask us directly, a real person answers.",
        phone: '(03) 9481 2200',
      }}
      singleOpen
      defaultOpen={0}
    />
  )
}

API reference

HealthFaqGentle accepts the following props.

PropTypeDefaultDescription
headingstring'Questions patients ask'
introstringone warm sentence setting a reassuring register
items*HealthFaqItem[]
fallback{ note: string; phone: string }ask-us-directly phone fallback
singleOpenbooleanfalseopening a row closes the others
defaultOpennumberindex open on first render (SSR), omit for fully closed

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface HealthFaqItem {
  question: string
  /** string = one paragraph; string[] = multiple paragraphs */
  answer: string | string[]
}

Frequently asked questions

How do I install the Gentle Health FAQ component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/health-faq-gentle`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Gentle Health FAQ require?

Gentle Health FAQ uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Gentle Health FAQ to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services