UI

UI

AMNT UI · 18 groups · 50+ parts

Components

Every part, working. Not pictures: type in them, sort them, tab through them. Phone first, light and dark, no component library underneath. Import from @/ui.

Terminal
npx amnt-ui add

01Ship Kit

Looks

One look changes every colour, the font and the corners. Try one on the little app below, or press the palette button at the top to put it on this whole site.

look: "blush"Black, blush pink and stone. Tall capital titles.

Good morning, Ada

Here is how the week went.

Revenue$12,480+18%vs last month
Active1,204−3%
Plans258+12
Oct 17

5227

  • This week
  • Last week
Visitors
LabelThis weekLast week
Oct 81210
Oct 91812
Oct 101514
Oct 112213
Oct 123018
Oct 132820
Oct 143522
Oct 153321
Oct 164025
Oct 175227
Pro

02

Foundations

Colour roles, type scale and the icon set. Never a hex value in a page: always a role.

Colour roles

primarysecondary-containertertiary-containersurface-containersurface-container-highestinverse-surfaceerror

Type scale

Display — big moments

Headline — page titles

Title — cards and sections

Body — what people read. Plain words, short lines.

Label — buttons and tabs

Icons (Material Symbols Rounded, 339 in the set)

03

Buttons

Five kinds by emphasis. At most one filled button per screen.

Variants

Sizes, icons, states

Chips

04

Inputs

Labels always visible, errors say what to do next.

Fields

We never share it.

Choices

Code input (sign-in and two-step codes)

6-digit code

05

Pickers

Dates, many-of, one-of-a-long-list, icons.

Fields with a picker

FranceJapan

Type to search. Enter adds. Backspace removes.

Calendar on its own

October 2026

SMTWTFS

06

File upload

Drop, click or paste. Each file has its own progress and its own reason when refused.

Drop zone

07

Data table

Search, sort by any column, pages, tick rows and act on them together. Works with your rows or the server's pages.

Customers
Ada LovelaceFree$3
Grace HopperPro$40
Alan TuringMax$77
Katherine JohnsonFree$24
Linus TorvaldsPro$61
Margaret HamiltonMax$8
Ada Lovelace 6Free$45
Grace Hopper 7Pro$82

08

Charts

Plain SVG in the look's colours. Every chart carries its numbers in a hidden table for screen readers.

Line / area

Oct 21

6035

  • This week
  • Last week
Visitors
LabelThis weekLast week
Oct 81210
Oct 91812
Oct 101514
Oct 112213
Oct 123018
Oct 132820
Oct 143522
Oct 153321
Oct 164025
Oct 173827
Oct 184626
Oct 195230
Oct 204933
Oct 216035

Bars

Sales
  • Paid
  • Refunds
Sales
LabelPaidRefunds
Oct 841
Oct 970
Oct 1052
Oct 1191
Oct 12120
Oct 1381
Oct 14142

Donut

898
PlansFree640 · 71%Pro210 · 23%Max48 · 5%

Metrics with sparklines

Revenue$12,480+18%vs last month
Active1,204−3%
trend

09

Display

People, statuses, short facts.

Avatars

+2Ada Lovelaceada@example.com

Badges and status

NeutralPrimaryErrorPremiumLivePausedFailed⌘K

Code

Install
npx amnt-ui add

10

Popups & menus

Native popover and dialog underneath: Esc, focus trap and click-outside come from the browser.

Open one

A sheet

Bottom sheet on a phone, a dialog on wide screens.

Put a form or details here.

Esc

  • Pages

    • Go to dashboard

  • Actions

    • Invite a teammate
    • Create a project

↑ ↓ moveEnter open

12

Feedback

Alerts stay, toasts pass. Empty states always say what to do next.

Alerts

Heads up

Your plan renews on 1 November.
Payment received.

Low Balance

You have $0.40 left.

Banner

New: teams and two-step sign-in are here.

Loading

Empty state

No messages yet

When someone writes to you, it lands here.

13

Landing blocks

The home page is built from these. Their colours come from the look, so the same page turns pink, lilac or lime.

Why us

Built for busy people

Each block says which colour role it wears. The look decides the colour.

  • Fast

    Ready in a minute.

  • Fair

    Pay for what you use.

  • Yours

    Use it anywhere.

  • Together

    Invite your team.

per picture
25¢
start to finish
60s
languages
6
subscriptions needed
0

  • For people

    Top up once, use it a little at a time.

    Start free

  • For teams

    Invite people, give roles, share the work.

    Make a team

14

Pricing

Plan cards with one featured, and a monthly or yearly switch. The featured card wears ink, the rest the page.

  • Free

    $0

    For trying it out.

    • 20 runs a day
    • Every part
    • Community help
    Start free

  • ProMost picked

    $12 / month

    For people who ship.

    • Unlimited runs
    • Teams up to 5
    • Email help in a day
    Go Pro

  • Max

    $39 / month

    For teams.

    • Everything in Pro
    • Unlimited seats
    • Admin and audit log
    Talk to us

15Ship Kit

Scroll showcase

The pinned hero at the top of our home page. Your products or features slide in one by one as people scroll, each in its own look, with thumbnails and a counter. A deck of cards on phones, a plain grid for people who ask for less motion.

Use it

page.tsx
<ScrollShowcase
  title="Say it once. Ship it."
  mark="Ship it."
  actions={[{ label: "Start", href: "/start" }]}
  slides={[
    { id: "forms", name: "Forms", tag: "Inputs",
      summary: "Labels that stay.", href: "/forms",
      look: "blush" },
  ]}
/>

See it move

No animation library: one scroll listener writes two numbers and the browser moves the rest. Smooth on a 60 Hz and a 120 Hz screen.

Scroll the home page

16

App parts

From AMNT's own studios: the AI prompt box, picture tiles you can pick, cards for a feed, and a chip that follows a long job.

AI prompt box (Composer)

1 credit

Picture tiles: tap to open, tick to pick

Fox

Owl

Bear

Loading pictures

Feed cards

New

Rainy day icons

24 icons

Paper textures

12 backgrounds

A long job

Running now

Everything in progress. It keeps going if you close this.

  • Drawing 40 pictures 26 of 40

17Free

Graphics

4,000+ free SVG icons, logos, elements, illustrations, backgrounds and patterns from the AMNT library. Copy the SVG, copy a React component, or download, in one click.

Open the graphics

18

App shells

Two frames for the signed-in product. Both are in the free parts.

SidebarShellSections on the left, folds to icons, slides in on phones. Dashboard, billing, team, settings, admin.
TopbarShellFive sections or fewer: tabs under the logo, full-width page. Same props, one import.