DIP switches

Component

About

A bank of tiny numbered slide switches, ON at the top, as on a circuit board. Every flag is visible at once and the bank reads as one value. For feature flags, permission bits and config words. Skeuomorphic, accessible, Base UI. Part of Bevel: bevel-ui.vercel.app

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds DIP switches to your project and fits it to your theme.

Code

How DIP switches is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import {
  DipSwitch,
  DipSwitchBank,
  DipSwitchLegend,
  DipSwitchReadout,
  DipSwitchToggle,
} from "@/components/ui/dip-switch"

const flags = [
  { value: "editor", label: "New editor" },
  { value: "streaming", label: "Streamed replies" },
  { value: "search", label: "Web search" },
  { value: "memory", label: "Memory" },
  { value: "batch", label: "Batch API" },
  { value: "sso", label: "Enforce SSO" },
  { value: "audit", label: "Audit export" },
  { value: "beta", label: "Beta models" },
]

/** Feature flags on a bank of DIP switches. The bank is also the config value you ship. */
export function DipSwitchFlags() {
  const [on, setOn] = React.useState(["editor", "streaming", "sso", "beta"])
  return (
    <DipSwitch
      aria-label="Feature flags"
      value={on}
      onValueChange={setOn}
      className="w-[26rem] rounded-2xl border bg-card p-6 shadow-sm"
    >
      <p className="text-sm font-semibold">Feature flags</p>
      <div className="flex flex-col items-center gap-5">
        <div className="scale-125 py-3">
          <DipSwitchBank>
            {flags.map((flag) => (
              <DipSwitchToggle key={flag.value} value={flag.value}>
                {flag.label}
              </DipSwitchToggle>
            ))}
          </DipSwitchBank>
        </div>
        <DipSwitchLegend className="grid w-full grid-flow-col grid-cols-2 grid-rows-4 gap-x-6" />
      </div>
      <code className="flex justify-between rounded-md bg-muted px-3 py-1.5 text-xs">
        <span>
          FLAGS=
          <DipSwitchReadout format="hex" className="text-xs" />
        </span>
        <DipSwitchReadout
          format="binary"
          className="text-xs text-muted-foreground"
        />
      </code>
    </DipSwitch>
  )
}

export default DipSwitchFlags