@tony-ui/mortar (0.1.0)
Installation
@tony-ui:registry=https://git.tony.codes/api/packages/tony/npm/npm install @tony-ui/mortar@0.1.0"@tony-ui/mortar": "0.1.0"About this package
Mortar
A shared design foundation and purpose-built Application UI and Marketing UI kits for React 19 and Tailwind CSS 4. MIT licensed. No account, token, registry connection or subscription is required to use the kit, including use by coding agents.
The package is @tony-ui/mortar, distributed from owner-hosted infrastructure. Releases are immutable and publicly downloadable without a service account. First publication is pending protected release verification.
Install
After public release:
npm config set @tony-ui:registry https://git.tony.codes/api/packages/tony/npm/ --location=project
npm install @tony-ui/mortar react react-dom tailwindcss
No UI service credential is needed.
Local install
Build and pack from this workspace:
npm run build
npm pack
Install the resulting tony-ui-mortar-0.1.0.tgz in the consuming app, with React 19, React DOM 19 and Tailwind 4. Public releases use https://git.tony.codes/api/packages/tony/npm/.
In the app's Tailwind CSS entry:
@import "tailwindcss";
@import "@tony-ui/mortar/styles.css";
The package ships its component styles. Standalone use requires no source scanning or hosted account. The separately governed hosted workflow currently also requires @source '../node_modules/@tony-ui/mortar/src'; in the CSS entry; generated agent starters include that policy declaration.
import { ThemeProvider, AppShell, Button } from "@tony-ui/mortar";
<ThemeProvider brand="neutral" density="comfortable" initialAppearance="system">
<AppShell
brand="Example"
navigation={[{ label: "Overview", href: "/", current: true }]}
>
<Button onClick={save}>Save changes</Button>
</AppShell>
</ThemeProvider>;
brand (neutral | green) and density (compact | comfortable | spacious) are controlled provider props. Appearance (light | dark | system) is changed using AppearanceControl; system changes are observed. Use one root provider. It restores document attributes on unmount. The provider uses effects: SSR applications should set matching initial document attributes to prevent a first-paint theme flash.
Purpose kits
The catalogue assigns each export to one purpose. Foundation primitives serve both purpose kits. Application UI provides shells, page headings, metrics, selectable tables, settings and activity. Marketing UI provides headers, heroes, features, social proof, pricing, FAQs, calls to action and footers. Product content and callbacks remain in the consumer. Sample names and prices belong only in the catalogue demonstrations.
Controls use native HTML and Headless UI. Tabs support arrow/Home/End navigation; dialogs and menus use Headless UI focus management. Density has a 44px control floor on coarse pointers. Feedback colours remain separate from the brand.
Hosted services
Mortar Cloud's registry, agent discovery, approvals, audit and managed release workflow are separate proprietary hosted services. Payment buys service access, not permission to use the MIT components. The kit performs no network requests and contains no licence check or telemetry.
This licence covers this package only. The central service, repository history, design reference documents, candidate fixtures and catalogue application are excluded from the public package.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @headlessui/react | ^2.2.0 |
Development Dependencies
| ID | Version |
|---|---|
| @axe-core/playwright | ^4.13.0 |
| @playwright/test | ^1.63.0 |
| @tailwindcss/vite | ^4.0.0 |
| @types/react | ^19.0.0 |
| @types/react-dom | ^19.0.0 |
| @vitejs/plugin-react | ^5.0.0 |
| prettier | ^3.9.9 |
| react | ^19.0.0 |
| react-dom | ^19.0.0 |
| tailwindcss | ^4.0.0 |
| typescript | ^5.9.3 |
| vite | ^7.1.0 |
Peer Dependencies
| ID | Version |
|---|---|
| react | ^19.0.0 |
| react-dom | ^19.0.0 |
| tailwindcss | ^4.0.0 |