Advisor Credentials Rows

Installation

pnpm dlx shadcn@latest add @cleverui/advisor-credentials-row

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

Usage

tsx

import { AdvisorCredentialsRow } from '@/components/blocks/advisor-credentials-row'

Exampletsx

'use client'

import { AdvisorCredentialsRow } from '@/components/blocks/advisor-credentials-row'

export default function AdvisorCredentialsRowDemo() {
  return (
    <AdvisorCredentialsRow
      heading="Our advisers"
      intro="Every adviser here is licensed, credentialed, and paid by you, never by commission."
      advisors={[
        {
          name: 'Helen Markovic',
          jobTitle: 'Principal Adviser · Wealth & Retirement',
          credentials: ['CFP', 'SMSF Specialist Advisor'],
          licenseNumber: 'AR 001284392',
          specialties: ['Retirement', 'SMSF', 'Estate planning'],
          yearsAdvising: '18 years advising',
          href: '#markovic',
        },
        {
          name: 'David Okonkwo',
          jobTitle: 'Senior Adviser · Investments',
          credentials: ['CFP', 'Chartered Financial Analyst'],
          licenseNumber: 'AR 001391847',
          specialties: ['Portfolio construction', 'Ethical investing', 'Insurance'],
          yearsAdvising: '12 years advising',
          href: '#okonkwo',
        },
        {
          name: 'Priya Chandrasekar',
          jobTitle: 'Adviser · Superannuation & Insurance',
          credentials: ['Diploma of Financial Planning'],
          licenseNumber: 'AR 001508214',
          specialties: ['Super consolidation', 'Income protection', 'Life cover'],
          yearsAdvising: '7 years advising',
          href: '#chandrasekar',
        },
        {
          name: 'James Whitaker',
          jobTitle: 'Adviser · Business & Complex Affairs',
          credentials: ['CFP', 'Tax (Financial) Adviser'],
          licenseNumber: 'AR 001176503',
          specialties: ['Business succession', 'SMSF', 'Debt strategies'],
          yearsAdvising: '15 years advising',
          href: '#whitaker',
        },
      ]}
      disclosureLine="Advice is provided under AFSL 512884. Our Financial Services Guide sets out how we're paid and is available on request."
    />
  )
}

API reference

AdvisorCredentialsRow accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Our advisers'`	–
`intro`	`string`	–	one plain sentence under the heading
`advisors`*	`AdvisorCredential[]`	–	–
`disclosureLine`	`string`	`"Advice is provided under AFSL 512884. Our Financial Services Guide sets out how we're paid and is available on request."`	genuine regulatory copy set beneath the directory, the block's accent

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

Referenced types

Typestsx

export interface AdvisorCredential {
  name: string
  jobTitle: string
  /** e.g. 'CFP', 'SMSF Specialist Advisor' */
  credentials?: string[]
  /** PREFORMATTED, e.g. 'AR 001284392' */
  licenseNumber?: string
  specialties?: string[]
  /** PREFORMATTED, e.g. '18 years advising' */
  yearsAdvising?: string
  /** makes the whole row a profile link */
  href?: string
}

Related components

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.

Loan Eligibility Steps

Loan eligibility and application steps in React, plain criteria up front, numbered stages with document notes and honest preformatted timeframes in Tailwind. No approval hype.

Rate Comparison Sheet

Home loan rate comparison rows in React, advertised and comparison rates paired in tabular numerals with the statutory warning as first-class Tailwind copy. Disclosure-forward, zero urgency.

Attorney Profile Rows

A firm directory of horizontal profile rows, serif names with admission years, focus areas in a middot run, matter counts and a direct line. Letterhead gravitas, not cards with badges.

Team Directory Rows

Dense industry-neutral directory rows under alphabetical mono group headers, name, role, and location column ruled by hairlines; scales from ten people to two hundred.

Agent Profile Card

An agent card that sells with proof, portrait placeholder, sold count and median days-on-market ticking up in tabular figures, suburbs served as chips, and an appraisal CTA.

Frequently asked questions

How do I install the Advisor Credentials Rows component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/advisor-credentials-row`. 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 Advisor Credentials Rows require?

Advisor Credentials Rows uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Advisor Credentials Rows 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.

Preview & code