Docs
Expanded Tabs

Expanded Tabs

Expanded Tabs usecase

References

This component is inspired by and adapted from the open source 21stdev project. We've customized it to fit our design system while maintaining the original aesthetic and functionality.

Installation

Install the required dependencies.

Install the required dependencies.

  npx shadcn@latest add "http://skiper-ui.com/registry/expanded-tabs.json"

Usage

define tabs object

import { Home,Bell,Settings,HelpCircle, Shield, User, } from "lucide-react"
const tabs = [
    { title: "Dashboard", icon: Home },
    { title: "Notifications", icon: Bell },
    { type: "separator" as const },
    { title: "Settings", icon: Settings },
    { title: "Support", icon: HelpCircle },
    { title: "Security", icon: Shield },
  ]

Use the component

 <ExpandedTabs tabs={tabs} />
Special CardSkiper Marquee