Effects

Code Tab Switcher

A compact tab control for switching between preview, source code, and usage examples.

tabscodeswitcher

Installation

Copy and paste the code into your project.

Accessibility notes

For production tabs, add roving focus and aria-selected state management.

Preview accent

TypeScript

const tabs = ["Preview", "Code", "Usage"];

export function CodeTabSwitcher() {
  return (
    <div className="inline-flex rounded-lg border border-white/12 bg-[#0b0f14]/82 p-1">
      {tabs.map((tab) => (
        <button
          key={tab}
          className={`rounded-md px-3 py-2 text-xs font-semibold transition ${tab === "Code" ? "bg-[#40E0D0] text-[#0b0f14]" : "text-slate-400 hover:text-white"}`}
          type="button"
        >
          {tab}
        </button>
      ))}
    </div>
  );
}

Usage

<CodeTabSwitcher />

Related components

brand#40E0D0

violet#a78bfa

orange#fb923c

Effects

Color Token Swatch

Beginner

A token list for documenting product colors, theme palettes, and design variables.

colortokenstheme

View component

Usage spike detected

Token volume is 28% higher than the last release window.

Effects

Inline Alert Banner

Beginner

A compact warning banner for usage spikes, sync issues, and workflow interruptions.

alertwarningfeedback

View component

Build passed

Preview deployed

Docs synced

Effects

Status Toast Stack

Beginner

A stacked notification pattern for build, deploy, and sync events.

toaststatusfeedback

View component