Anvil

Anvil is the React design system for Ditto web projects.

The component library is based on Tailwind CSS v4 and owns the shared theme, tokens, and component source detection.

Installation

Install dependencies from the repository root:

yarn install

Getting started

1. Install the component library and Tailwind CSS.
2. Import Tailwind and the design-system theme from your application CSS:

@import 'tailwindcss';
@import '@dittolive/anvil/theme.css';

@source './src';

Fonts are available through explicit package subpaths, for example @dittolive/anvil/font/inter/inter.css.

New icons should use the Icon component from @dittolive/anvil with a Phosphor icon passed as the svg prop.

Development

• yarn storybook starts Storybook for local component development.
• yarn test runs the test suite.
• yarn lint runs linting, formatting checks, and TypeScript checks.
• yarn build creates the production package in dist/.
• yarn build:watch rebuilds the package when source files change.
• yarn changeset creates a release note and semver bump for a package change.

To test local Anvil changes in another project, point that project's dependency at this checkout:

"dependencies": {
  "@dittolive/anvil": "link:../path/to/anvil"
}

Run yarn build:watch here while developing, then restore the consuming project to a released package version before committing its dependency changes.

Documentation

Run yarn storybook to browse components locally, or yarn build-storybook to produce the static documentation site.

Releases

Anvil uses Changesets for versioning, changelog generation, and npm publishing. For any user-facing package change, run yarn changeset, select the appropriate semver bump, and commit the generated .changeset/*.md file with the change.

When changes land on main, the publish workflow opens or updates a release PR that applies the pending changesets to package.json and CHANGELOG.md. Merging that release PR publishes @dittolive/anvil to npm after yarn pack:check passes.

Package Boundary

This repository is the source of truth for @dittolive/anvil. The package build is the contract: consumers should use the exports in package.json and depend on a released package version unless they are explicitly testing a local checkout.

License

Anvil is licensed under the PolyForm Noncommercial License 1.0.0. Commercial use requires separate permission from DittoLive, Inc. Please consult LICENSE.md within this package for license details.

Copyright © 2019-2026 DittoLive, Inc.