About
AMNT UI is a free, MIT-licensed design system for Next.js and Tailwind. It includes 50+ UI parts, light and dark design tokens, a Tailwind preset, keyboard support, responsive layouts, and screen-reader labels. Install the whole kit or selected parts with npx amnt-ui add; source
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Amnt UI to your project and fits it to your theme.
Code
How Amnt UI is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Status, type StatusState } from "@/components/ui/amnt-ui";
const examples: StatusState[] = ["live", "running", "paused", "failed", "draft"];
export default function StatusDemo() {
return (
<div className="mx-auto flex w-full max-w-md flex-col gap-3 rounded-xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white">
<h2 className="text-base font-semibold">Agent status</h2>
<p className="text-sm text-slate-500 dark:text-slate-400">Color and a text label make each state easy to scan.</p>
<div className="flex flex-wrap gap-x-6 gap-y-4 pt-2">
{examples.map((state) => <Status key={state} state={state} />)}
</div>
</div>
);
}