Docs
Animations Led Card

Animations Led Card

Displays a beautiful Animations Led Card.

Loading...

Installation

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        led: {
          "0%": { fill: "currentColor", brightness: "1" },
          "50%": { fill: "#0891b2", brightness: "500%" },
          "100%": { fill: "currentColor", brightness: "1" },
        },
      }
      animation: {
        led: "led 100ms ease-in-out",
     },
    },
  },
}

Copy and paste the Led Card code into your project.

API Reference

PropTypeDescription
wordstringthe word to display

Usage

export function Led() {
  return <LEDBoard word="BUOU" />
}
Frosted Glass CardBento grid