# @a-type/ui

Latest version **6.1.63** (published 2026-11-06) · 4.1K weekly downloads

## Install

```sh
npm install @a-type/ui
pnpm add @a-type/ui
yarn add @a-type/ui
bun add @a-type/ui
```

## Health

**Score 80/100 (A)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; growing popularity.

Warnings: no types.

## Facts

| | |
|---|---|
| Version | 6.1.63 |
| Published | 2026-11-06 |
| First published | 2023-05-25 |
| Weekly downloads | 4.1K |
| TypeScript types | none |
| Module format | ESM |
| Node | >=24 |
| Dependencies | 11 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Maintainers | a-type |
| Keywords | tanstack-intent |

## Links

- npm: https://www.npmjs.com/package/@a-type/ui
- Repository: https://github.com/a-type/ui
- npm.io page: https://npm.io/package/@a-type/ui

## Dependencies (11)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [formik](https://npm.io/package/formik.md) ^2.4.6
- [valtio](https://npm.io/package/valtio.md) ^2.1.4
- [date-fns](https://npm.io/package/date-fns.md) ^4.1.0
- [frimousse](https://npm.io/package/frimousse.md) ^0.2.0
- [pluralize](https://npm.io/package/pluralize.md) ^8.0.0
- [@a-type/utils](https://npm.io/package/@a-type/utils.md) ^1.1.9
- [@base-ui/react](https://npm.io/package/@base-ui/react.md) ^1.9.0
- [calendar-blocks](https://npm.io/package/calendar-blocks.md) ^0.5.3
- [@use-gesture/react](https://npm.io/package/@use-gesture/react.md) ^10.3.1
- [browser-image-resizer](https://npm.io/package/browser-image-resizer.md) ^2.4.1

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 6.1.63 (latest) — 2026-11-06
- 4.1.0-beta.7 (beta) — 2026-01-20
- 6.1.62 — 2026-11-06
- 6.1.61 — 2026-10-31
- 6.1.60 — 2026-10-31
- 6.1.59 — 2026-10-31
- 6.1.58 — 2026-10-31
- 6.1.57 — 2026-10-31
- 6.1.56 — 2026-10-28
- 6.1.55 — 2026-10-28
- 6.1.54 — 2026-10-03
- 6.1.53 — 2026-10-03
- 6.1.52 — 2026-10-03
- 6.1.51 — 2026-09-13
- 6.1.50 — 2026-09-13
- … 524 more at https://npm.io/package/@a-type/ui/versions

## README

# @a-type/ui

My personal UI component library for building React applications.

## Documentation

Browse the [component docs and examples](https://ui.gfor.rest), or run
`pnpm storybook` locally.

For coding agents, the docs are also published as JSON at
[`manifests/components.json`](https://ui.gfor.rest/manifests/components.json)
and [`manifests/docs.json`](https://ui.gfor.rest/manifests/docs.json). The
package ships [TanStack Intent](https://tanstack.com/intent) skills for listing
components, looking up their docs, and writing CSS with the Arbor theme. Run
`npx @tanstack/intent install` in your project to point your agent at them.

## Quick start

Install the package and its peer dependencies:

```sh
pnpm add @a-type/ui @arbor-css/core @arbor-css/postcss react react-dom
```

The library's CSS uses [Arbor](https://www.npmjs.com/package/@arbor-css/core)
tokens and mixins, so your build must run the Arbor PostCSS plugin. Add it to
`postcss.config.ts`:

```ts
import { ArborPlugin } from '@arbor-css/postcss';

export default { plugins: [ArborPlugin()] };
```

Then create `arbor.config.ts` in your project root to configure the theme:

```ts
import { presetAtype } from '@a-type/ui/arbor';

export default presetAtype({ color: { mainColor: 'tomato', ranges: {} } });
```

Import the stylesheet and wrap your app in the provider:

```tsx
import '@a-type/ui/main.css';
import { Button, Provider } from '@a-type/ui';

function App() {
	return (
		<Provider manifestPath={false}>
			<Button>Get started</Button>
		</Provider>
	);
}
```

The provider includes icons, tooltips, toasts, and other shared behavior.
Remove `manifestPath={false}` if you want its PWA install dialog to load
`/manifest.json`.

---
_Source: https://npm.io/package/@a-type/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._