Feature Tabs

New

A feature list beside a panel that crossfades between illustrations, with an auto-advance progress bar.

motionutils@soultel/use-reduced-motion-safe

Revenue$48,290

Installation

$ pnpm dlx shadcn@latest add @soultel/feature-tabs

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/feature-tabs.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/feature-tabs.tsx.

Usage

example.tsx13 lines

import { FeatureTabs } from "@/components/feature-tabs"
import { BarChart3, Workflow } from "lucide-react"

export function Features() {
  return (
    <FeatureTabs
      items={[
        { id: "analytics", title: "Analytics", icon: <BarChart3 />, description: "See what moves revenue.", content: <img src="/analytics.png" alt="" /> },
        { id: "flows", title: "Automations", icon: <Workflow />, description: "Run the busywork for you.", content: <img src="/flows.png" alt="" /> },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
items	FeatureTab[]	-	id, title, description, icon, and the panel content.
value / defaultValue	string	-	Controlled or initial active id.
onValueChange	(id: string) => void	-	Called when the tab changes.
interval	number	6000	Auto-advance time in ms. 0 turns it off. Pauses on hover and focus.