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

component.tsx

<Button glow>
  Ship it
</Button>

Cards

Copy Code Card

Beginner

A compact code surface for snippets, component recipes, and copy actions.

codecopysnippet

View component

AI Interfaces

Model Switcher

Intermediate

A segmented control for fast, smart, and deep model modes.

modelswitchercontrol

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