Toast Tabs
A unique tab switching component that displays content like a toast message, with an animated avatar switcher.
"The workflow integration is simply seamless. It has completely transformed."
Installation
pnpm dlx rareui add toast-tabs
Usage
1
Import the component
import ToastTabs from "@/components/rareui/ToastTabs";
2
Use in your application
export default function MyComponent() {
return (
<ToastTabs />
);
}
Features
Displays tab content in a compact, toast-like notification card.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | TabData[] | defaultTabs | Array of tab data objects (id, image, title, description). |
autoplay | boolean | true | Whether to automatically cycle through tabs. |
autoplayDelay | number | 3000 | Duration (ms) for each tab slide. |
ringColor | string | "#f97316" | Color of the progress ring. |
className | string | - | Additional styles for the container. |