# Apple Mail Tabs — Skecher UI

A colorful mail category selector inspired by Apple Mail, with compact inactive tabs and an expanded active label.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/apple-mail-tabs
```

## Dependencies

- lucide-react
- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { Bell, Newspaper, ShoppingBag } from "lucide-react";
import { useState } from "react";

import { AppleMailTabs } from "@/components/ui/apple-mail-tabs";

const tabs = [
  {
    value: "news",
    label: "News",
    icon: Newspaper,
    activeBackgroundClassName: "bg-[#0a84ff]",
    activeTextClassName: "text-white",
  },
  {
    value: "orders",
    label: "Orders",
    icon: ShoppingBag,
    activeBackgroundClassName: "bg-[#30d158]",
    activeTextClassName: "text-[#09280f]",
  },
  {
    value: "alerts",
    label: "Alerts",
    icon: Bell,
    activeBackgroundClassName: "bg-[#ff9f0a]",
    activeTextClassName: "text-[#261700]",
  },
] as const;

export default function AppleMailTabsExample() {
  const [value, setValue] = useState("news");

  return (
    <AppleMailTabs
      aria-label="Inbox categories"
      tabs={tabs}
      value={value}
      onValueChange={setValue}
    />
  );
}
```

## Source files

- components/ui-components/apple-mail-tabs.tsx — Apple Mail-inspired category tabs component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/apple-mail-tabs
- Registry item with complete source: https://skecher-ui.com/r/apple-mail-tabs.json
- Component AI context: https://skecher-ui.com/llms/apple-mail-tabs