heyySwap

"The workflow integration is simply seamless. It has completely transformed."

Installation

pnpm dlx rareui add toast-tabs

Usage

1

Basic Usage

Simply import the component and pass your tabs data.

Example

import ToastTabs from '@/components/ui/toast-tabs';

const myTabs = [
  {
    id: 1,
    image: "https://example.com/img1.jpg",
    title: "User 1",
    description: "This is a testimonial."
  }
];

export default function App() {
  return <ToastTabs tabs={myTabs} />;
}

2

Customizing Timing

Adjust the autoplay delay and ring color.

Example

<ToastTabs 
  tabs={myTabs} 
  autoplayDelay={5000} 
  ringColor="#8b5cf6" 
/>

Features

Seamlessly integrated and optimized for high-performance React applications.

Props

Prop	Type	Default	Description
`tabs`	`TabData[]`	defaultTabs	Array of tab objects containing id, image, title, and description.
`autoplay`	`boolean`	true	Whether the tabs should automatically cycle.
`autoplayDelay`	`number`	3000	Duration in milliseconds for each slide.
`ringColor`	`string`	"#f97316"	Color of the progress ring and beam effect.
`className`	`string`	-	Additional CSS classes for styling.