BuouNext
  • Features
  • DocumentsNew
  • BrutalUINew
  • ShowcaseHot
  • Pricing
  • Blog

    Getting Started

    Introduction

    BuouNext Instruction

    InstallationRun BuouNextProject StructureComponentsAuthenticationEmailAPI CallsDatabasePaymentSEO OptimizationHeadless CMSContact

    AI Instruction

    AI ImageNewAI ChatbotNewAI SearchNewAI NotionNew

    Components

    Super ClockNewFloating DockNewAI Image CompareNewAvatar ListNewClockNewDarkModeNewStepperNewRotation AvatarNewButton with TrailNewDotNewGridNewCounter CardNewMarquee CardNewProfile CardNewBento gridNewBorder Trail CardNewBuouNext FeaturesNewColor CardNewMouse FollowingNewColor GridNewAnimotion In View CardNewLevitate CardNewReorder CardNewGenerate TextNewSmooth Fliping NumberNewSmooth Fliping TextNewSmooth Typing TextNewTyping TextNewWindow Typing TextNewFade In OutNewText DropNewScalingNew
    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" />
}