Installation

DottoUI is a copy-paste system in the shadcn/ui spirit. The registry copies components into your app, installs their package dependencies, and patches your configured Tailwind CSS file with the DottoUI core import.

Requirements

Before adding DottoUI, make sure your app has:

• React 19
• Tailwind v4 running in your build setup
• A global CSS file imported by your app entry/root
• A shadcn-compatible components.json with aliases such as @/components and @/lib/utils

For a new project, initialize shadcn first:

npx shadcn@latest init

Install DottoUI

Install the DottoUI core, utilities, and all current components with one command:

npx shadcn@latest add https://yamustofa.github.io/dotto-ui/r/dotto.json

This installs the shared DottoUI core stylesheet, the cn() utility, component files, Fontsource packages for the DottoUI fonts, and the packages required by those components.

Install One Component

If you only need one component, install it directly:

npx shadcn@latest add https://yamustofa.github.io/dotto-ui/r/button.json

Each component pulls in its registry dependencies automatically. For example, button installs the DottoUI core stylesheet, the shared cn() utility, the Fontsource packages, and the packages it needs.

CSS Updates

DottoUI core asks shadcn to update your configured Tailwind CSS file. In a TanStack Start or Vite app, that usually means src/styles.css receives an import like this near the top of the file:

@import "tailwindcss";
@import "./styles/_dotto-core.css";

Your existing shadcn token blocks can stay in the file. DottoUI’s tokens and pixel utilities live in src/styles/_dotto-core.css, and that file imports the Fontsource CSS for Silkscreen and Space Mono.

If your global CSS file lives somewhere unusual, check the generated import path and adjust it so it points to the copied src/styles/_dotto-core.css file.

Use a Component

import { Button } from "@/components/ui/button"

export function ProjectCta() {
  return <Button>start a project</Button>
}

Add More Components

Install each component when you need it:

npx shadcn@latest add https://yamustofa.github.io/dotto-ui/r/card.json
npx shadcn@latest add https://yamustofa.github.io/dotto-ui/r/input.json

Troubleshooting

If a component is copied but does not appear styled, check that your global CSS file imports both Tailwind and _dotto-core.css.

If the import path @/components/ui/button fails, check the aliases in your components.json and tsconfig.json.

If you are using TanStack Router and see a notFoundError on __root__, that is a route rendering issue. Make sure the route that renders your component matches the current URL and that your root route renders an <Outlet />.

After installation, the files are yours. You can keep the default DottoUI look, adjust the Tailwind classes, or compose the pieces into your own product flows.