Skip to main content
Clever Ops

Coverage Explainer Panel

An insurance coverage disclosure panel in React, inclusions with preformatted limits, exclusions at equal weight, a plain excess line and a PDS note. Tailwind, no fine-print burial.

Preview & code

Loading Coverage Explainer Panel preview

Installation

pnpm dlx shadcn@latest add @cleverui/coverage-explainer-panel

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

Usage

tsx
import { CoverageExplainerPanel } from '@/components/blocks/coverage-explainer-panel'
Exampletsx
'use client'

import { CoverageExplainerPanel } from '@/components/blocks/coverage-explainer-panel'

export default function CoverageExplainerPanelDemo() {
  return (
    <CoverageExplainerPanel
      eyebrow="What's in the policy"
      heading="Coverage, plainly stated"
      intro="Comprehensive car insurance, explained the way we would want it explained to us."
      coveredTitle="What's covered"
      covered={[
        {
          item: 'Collision and accidental damage',
          limit: 'Market value',
        },
        {
          item: 'Theft and attempted theft',
          limit: 'Market value',
        },
        {
          item: 'Windscreen and window glass',
          limit: 'Up to $1,500',
        },
        {
          item: 'New-for-old replacement',
          limit: 'First 2 years',
        },
        {
          item: 'Hire car after a claim',
          limit: 'Up to 14 days',
        },
        {
          item: 'Towing to the nearest authorised repairer',
          limit: 'Reasonable cost',
        },
      ]}
      notCoveredTitle="What's not covered"
      notCovered={[
        'Damage while driving under the influence of alcohol or drugs',
        'Wear and tear, rust, or mechanical failure',
        'Loss arising from unlicensed or unauthorised drivers',
        'Damage from racing, pace-making, or reliability trials',
        'Personal belongings left in an unlocked vehicle',
      ]}
      excessLine="A $650 basic excess applies to every claim. You chose it when you took out the policy, and it is printed on your certificate of insurance."
      pdsNote="This page is a summary only. The Product Disclosure Statement sets out the full terms, limits and exclusions, read it before you decide."
    />
  )
}

API reference

CoverageExplainerPanel accepts the following props.

PropTypeDefaultDescription
eyebrowstring"What's in the policy"quiet sans micro-label, sober, never a colored pill
headingstring'Coverage, plainly stated'
introstringone plain sentence
coveredTitlestring"What's covered"
covered*CoverageItem[]
notCoveredTitlestring"What's not covered"
notCovered*string[]
excessLinestring'A $650 basic excess applies to every claim. You chose it when you took out the policy, and it is printed on your certificate of insurance.'excess spoken as a sentence a policyholder understands
pdsNotestring'This page is a summary only. The Product Disclosure Statement sets out the full terms, limits and exclusions, read it before you decide.'PDS pointer treated as first-class copy

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

Referenced types

Typestsx
export interface CoverageItem {
  item: string
  /** PREFORMATTED, e.g. 'Up to $20,000' or 'New-for-old, first 2 years' */
  limit?: string
}

Frequently asked questions

How do I install the Coverage Explainer Panel component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/coverage-explainer-panel`. 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 Coverage Explainer Panel require?

Coverage Explainer Panel 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 Coverage Explainer Panel 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