Skip to main content

​
Overview

Toast Tabs combines an avatar row with a floating toast card. The active avatar grows and gains a colored SVG progress ring that fills as the autoplay timer advances. Hovering pauses the timer; clicking an avatar resets and activates it. All transitions use Framer Motion’s popLayout mode for seamless enter/exit sequencing.

​
Installation

npx rareui@latest add toast-tabs
Or copy the component manually from components/rareui/ToastTabs.tsx into your project.

​
Usage

import ToastTabs from '@/components/rareui/ToastTabs';

export default function MyComponent() {
  return <ToastTabs />;
}

​
Props

​
tabs
TabData[]
default:"defaultTabs"
Array of tab data objects. Each entry requires id: string | number, image: string (avatar URL), title: string, and description: string (quote or summary shown in the toast card).
​
autoplay
boolean
default:"true"
When true, the component automatically advances to the next tab after each autoplayDelay interval. Pauses on mouse enter and resumes on mouse leave.
​
autoplayDelay
number
default:"3000"
Duration in milliseconds between automatic tab advances. The progress ring fills over this duration to indicate remaining time.
​
ringColor
string
default:"#f97316"
CSS color value for the SVG progress ring around the active avatar. In dark mode, the ring always renders as white regardless of this value.
​
className
string
Additional Tailwind or CSS classes applied to the outermost container <div>.

​
Examples

​
Default testimonials carousel

<ToastTabs />

​
Custom tabs with a blue ring

import ToastTabs, { TabData } from '@/components/rareui/ToastTabs';

const reviews: TabData[] = [
  {
    id: 'amy',
    image: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=200',
    title: 'Amy Park',
    description: 'Shipping features twice as fast since we adopted this design system.',
  },
  {
    id: 'leo',
    image: 'https://images.unsplash.com/photo-1502767089025-6572583495b9?w=200',
    title: 'Leo Martin',
    description: 'The animations make our product feel genuinely premium, not just polished.',
  },
];

export default function Reviews() {
  return (
    <ToastTabs
      tabs={reviews}
      ringColor="#3b82f6"
      autoplayDelay={4000}
    />
  );
}

​
Static display without autoplay

<ToastTabs autoplay={false} />
When autoplay is false, the active avatar still shows the colored ring, but it renders as a static full circle rather than a progress arc.

​
Features

Animated Progress Ring

An SVG stroke-dashoffset driven by a Framer Motion value fills around the active avatar as the autoplay timer counts down.

Toast Content Card

Active tab content animates in and out using AnimatePresence with popLayout mode for smooth positional sequencing.

Autoplay with Pause

The timer advances using useAnimationFrame for frame-accurate progress tracking and pauses automatically on hover.

Keyboard Navigation

Arrow Left / Arrow Right keys move between avatars, reset the progress ring, and shift focus — fully accessible.

Customizable Ring Color

Pass any valid CSS color to ringColor to match your brand. Overridden to white automatically in dark mode.

Grayscale Inactive Avatars

Inactive avatars are desaturated and dimmed, creating clear visual hierarchy that lifts on hover.

Build docs developers (and LLMs) love

Get started for freeTalk to us