Skip to main content
Clever Ops

Logic Gate Bench

A live logic schematic for React, flip real toggle switches and watch pulses race hairline traces through gates to the output lamp. aria-pressed switches, Tailwind tokens.

Preview & code

Loading Logic Gate Bench preview

Installation

pnpm dlx shadcn@latest add @cleverui/logic-gate-bench

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { LogicGateBench } from '@/components/ui/logic-gate-bench'
Exampletsx
import { LogicGateBench } from '@/components/ui/logic-gate-bench'

export default function LogicGateBenchDemo() {
  return (
    <div className="mx-auto w-full max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
      <p className="mb-4 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · discrete logic
      </p>
      <h2 className="mb-6 text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
        Flip the switches. Watch the truth propagate.
      </h2>
      <LogicGateBench
        gateA="AND"
        gateB="XOR"
        defaultStates="101"
        ariaLabel="Logic gate test bench"
      />
      <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
        Three inputs feed (A AND B) XOR C. Each pulse is caused by a switch you
        flipped, schematic drafting language with an honest contract.
      </p>
    </div>
  )
}

API reference

LogicGateBench accepts the following props.

PropTypeDefaultDescription
gateALogicGateKind'AND'first gate, fed by inputs A and B
gateBLogicGateKind'XOR'output gate, fed by gate A's result and input C
defaultStatesstring'101'initial A/B/C switch states as three 0/1 characters
ariaLabelstring'Logic gate bench'accessible name for the schematic group

…plus everything from React.HTMLAttributes<HTMLDivElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export type LogicGateKind = 'AND' | 'OR' | 'XOR'

Frequently asked questions

How do I install the Logic Gate Bench component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/logic-gate-bench`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Logic Gate Bench require?

Logic Gate Bench uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Logic Gate Bench to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services