Switchboard Card

A card component with a light grid illustration that displays a title and subtitle. It renders a grid of lights that can be static or animated. Use it to visually represent interactive elements or data in a modern design.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/switchboard-card

npx layro-cli add @educlopez/switchboard-card

npx layro-cli add @educlopez/switchboard-card

bunx layro-cli add @educlopez/switchboard-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useEffect, useMemo, useState } from "react";

export type LightState = "off" | "medium" | "high";

export interface SwitchboardCardProps {
  className?: string;
  columns?: number;
  gridPattern?: number[] | number[][]; // Direct grid pattern: flat array (columns*rows) or 2D array [rows][columns] where 0=off, 1=high
  href?: string;
  onButtonClick?: () => void;
  randomLights?: boolean; // If true, randomly activate some lights