Ants Card

A delightful card component with animated ants walking around it. Perfect for adding a playful touch to your UI, onboarding screens, or empty states.

Preview

Nyxhora UI

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/ants-card.json

Usage

tsx
13 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
import { AntsCard } from "@/components/ui/ants-card"

export default function FunCard() {
  return (
    <div className="flex items-center justify-center p-16 bg-gradient-to-br from-green-300 to-green-400">
      <AntsCard 
        title="Welcome!"
        antCount={4}
        size={280}
      />
    </div>
  )
}

Variations

Fun Message

Bugs are features! 🐛

Developer Vibes

Ship it! 🚀

Examples

Single Ant

Lone Explorer

All Four Ants

Ant Colony! 🐜

Custom Size

Big Card!

Dark Theme

Dark Mode 🌙

Custom Content

🎉

Congratulations!

You found the ants

Nyxhora Sayings 😄

Bug-free since never

Works on my machine

It's not a bug

Props

PropTypeDefaultDescription
titlestringNyxhora UICard title text
antCountnumber4Number of ants (1-4)
sizenumber250Card size in pixels
backgroundColorstring#ffffffCard background color
antColorstring#000000Ant color
borderRadiusnumber16Card border radius in pixels
childrenReact.ReactNodeundefinedCustom content instead of title
classNamestringundefinedAdditional CSS classes