Accessible React components, monochrome by default

Components built on React Aria, with one quiet look. Add them with the shadcn CLI and own the code.

npx shadcn@latest init --preset https://dots.sendity.net/init?base=aria

Balance

Monthly spending$660 left until Dec 1

Online payments

Components

109 components. Alongside the familiar parts, Dots adds pieces made for money screens:

One look
Monochrome, borderless and pill-shaped. Depth comes from fills, not lines. Color is kept for destructive and warning states.
Accessible by default
Interactive components are built on React Aria, so keyboard, screen reader and touch behavior come from a mature, well tested library.
Your code
The shadcn CLI copies components into your project as source, so you can read and change them. Only a few small dependencies come from npm.
Made for money
Amounts, keypads, limits and transaction rows ship with the kit, with tabular digits and screen reader labels already handled.

1
Create your app
Any React app with Tailwind CSS v4 works. For example, with Next.js:
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
2
Initialize Dots
Run init with the Dots preset. It writes components.json, registers the @dots namespace and adds the palette and fonts.
npx shadcn@latest init --preset https://dots.sendity.net/init?base=aria
3
Add a component
Each component pulls in the parts and dependencies it needs.
npx shadcn@latest add @dots/button