// Feedback

Status

Color-coded status for process or state.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/status

// Usage

1import { Status } from "@/components/ui/status";
2
3<Status />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { tv, type VariantProps } from "tailwind-variants";
6import { cn } from "@/lib/utils";
7
8export const statusVariants = tv({
9  base: [
10    "shrink-0 rounded-full",
11    "flex items-center justify-center",
12    "font-medium text-[10px]",
13    "ring-2 ring-background",
14  ],
15  variants: {
16    variant: {
17      default: "bg-foreground text-background",
18      success: "bg-success text-white",
19      info: "bg-info text-white",
20      warning: "bg-warning text-white",
21      destructive: "bg-destructive text-white dark:bg-destructive-foreground",
22    },
23    size: {
24      sm: "size-2 [&_svg:not([class*='size-'])]:size-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0",
25      md: "size-2.5 [&_svg:not([class*='size-'])]:size-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
26      lg: "size-3 [&_svg:not([class*='size-'])]:size-2.5 [&_svg]:pointer-events-none [&_svg]:shrink-0",
27    },
28  },

// Dependencies

@ark-ui/react tailwind-variants