Components
Loading preview...
The DynamicStatusButton component is a sleek and professional UI element built entirely with shadcn UI. It displays an icon and label that dynamically change based on context, such as theme, weather, or system status, while using plain, neutral colors for a clean and modern appearance. Each status has its own background and text color, chosen for clarity and readability, ensuring seamless integration into dashboards, apps, or any interface. The component is fully configurable, supports smooth animated transitions between statuses, and adapts gracefully to different button sizes, making it a versatile and elegant solution for context-aware interactive buttons.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/dynamic-status-button"use client"
import DynamicStatusButton, { ButtonStatus } from "@/components/ui/dynamic-status-button"
import { FaSun, FaMoon, FaCloud, FaBolt } from "react-icons/fa"
export default function DynamicStatusButtonDemo() {
const statuses: ButtonStatus[] = [
{ label: "Sunny", icon: <FaSun />, color: "#e5e7eb", textColor: "#111827" }, // light gray background, dark text
{ label: "Night", icon: <FaMoon />, color: "#374151", textColor: "#f9fafb" }, // dark gray background, light text
{ label: "Cloudy", icon: <FaCloud />, color: "#9ca3af", textColor: "#111827" }, // medium gray background, dark text
{ label: "Storm", icon: <FaBolt />, color: "#6b7280", textColor: "#f9fafb" }, // slate gray background, light text
]
return (
<div className="p-6 flex flex-col gap-6">
<DynamicStatusButton
statuses={statuses}
onClick={(status) => console.log("Current Status:", status.label)}
/>
<DynamicStatusButton
statuses={statuses}
width={200}
className="rounded-xl text-lg"
/>
</div>
)
}