Get started

Install

Run this in your Next.js project. It does everything:

npx amnt-ui add

1. Copies the parts into src/ui. You own the files from then on.

2. Wires Tailwind 3.3+ or 4: the Ink preset in tailwind.config, three imports in globals.css.

3. Installs the 4 small packages the parts need.

Tested on a fresh create-next-app (Next.js 16 + Tailwind 4, and Next.js 14 + Tailwind 3) with next build. Run it again any time to update; files you changed are kept.

Some parts only

Name the parts. Each one brings the files it needs, nothing else.

npx amnt-ui add button date-picker data-table

See every name:

npx amnt-ui list

By hand

Prefer no tool? Copy ui/ from GitHub into src/ui and tailwind.preset.ts into src, then:

npm i clsx tailwind-merge@1 && npm i -D tailwindcss-animate @tailwindcss/typography

Tailwind 4: make tailwind.config.mts at the project root, and put the imports at the top of src/app/globals.css.

import ink from "./src/tailwind.preset";
export default { presets: [ink], content: ["./src/**/*.{ts,tsx}"] };

@import "../ui/tokens/tokens.css";
@import "../ui/tokens/legacy.css";
@import "../ui/ui.css";
@import "tailwindcss";
@config "../../tailwind.config.mts";

Tailwind 3.3+: put presets: [ink] in your Tailwind config, add "./src/ui/**/*.{ts,tsx}" to its content, and add the imports above @tailwind base.

@import "../ui/tokens/tokens.css";
@import "../ui/tokens/legacy.css";
@import "../ui/ui.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

Use a part

import { Button, DataTable, DatePicker } from "@/ui";
import { Rocket } from "@/ui/symbols";

<Button icon={Rocket}>Launch</Button>

tsconfig.json needs "@/*": ["./src/*"]. Next.js sets that up by default. Every part is on the components page, working.

Colour and dark mode

Parts use colour roles (bg-surface, text-on-surface, bg-primary), never fixed colours. Add dark to the <html> class and every part follows. Change the roles in ui/tokens/tokens.ts and your brand colour reaches every part.

Never write a hex value in a page. If a part is missing a role, add the role.

Icons

339 Material Symbols (Rounded), each its own export, so a page pays only for the icons it draws.

import { Icon } from "@/ui";
import { Search } from "@/ui/symbols";

<Icon icon={Search} />

For agents

Three ways to teach an AI agent the rules, so it uses the real parts instead of inventing its own.

claude plugin marketplace add amntio/amnt-ui
claude plugin install amnt-ui@amnt

AGENTS.md holds the rules every part follows and how to add one. llms.txt is a short map of the whole system. After install, just ask: "add a settings page with a data table and a date range picker".

Figma

The tokens are in figma/ on GitHub, in the standard design-token format (DTCG): light.tokens.json (49 colour roles), dark.tokens.json and base.tokens.json (spacing, corners, type sizes).

1. Make one collection, Ink, with two modes: Light and Dark.
2. Import light.tokens.json into Light and dark.tokens.json into Dark.
3. Import base.tokens.json into a second collection.

The parts themselves are code, not Figma frames.