> ## Documentation Index
> Fetch the complete documentation index at: https://tally.outhebox.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install Tally for React, import the styles and set up fonts.

**1. Install the packages**

`tally-react` renders the grid. `tally-core` is the engine it renders. React 19 or newer is required.

> [tab] npm
>
> ```sh theme={null}
> npm install tally-react tally-core react react-dom
> ```

> [tab] pnpm
>
> ```sh theme={null}
> pnpm add tally-react tally-core react react-dom
> ```

> [tab] yarn
>
> ```sh theme={null}
> yarn add tally-react tally-core react react-dom
> ```

> [tab] bun
>
> ```sh theme={null}
> bun add tally-react tally-core react react-dom
> ```

**2. Import the styles**

Import the stylesheet once, at the root of your app.

```ts theme={null}
import 'tally-react/styles.css'
```

The stylesheet is unlayered and every selector is scoped under `.tally`, so it survives Tailwind's preflight and other resets without configuration.

**3. Add the fonts**

The default type is Onest, with JetBrains Mono for numbers. To self-host both, install the font packages and import `tally-react/fonts.css`.

> [tab] npm
>
> ```sh theme={null}
> npm install @fontsource-variable/onest @fontsource-variable/jetbrains-mono
> ```

> [tab] pnpm
>
> ```sh theme={null}
> pnpm add @fontsource-variable/onest @fontsource-variable/jetbrains-mono
> ```

> [tab] yarn
>
> ```sh theme={null}
> yarn add @fontsource-variable/onest @fontsource-variable/jetbrains-mono
> ```

> [tab] bun
>
> ```sh theme={null}
> bun add @fontsource-variable/onest @fontsource-variable/jetbrains-mono
> ```

```ts theme={null}
import 'tally-react/fonts.css'
```

Leave it out and the system font stack takes over.

## Tailwind CSS

With Tailwind v4, import the stylesheet into a layer when utilities should be able to override Tally classes.

```css theme={null}
@layer theme, base, tally, components, utilities;
@import 'tailwindcss';
@import 'tally-react/styles.css' layer(tally);
```

## Other frameworks

The Vue, Svelte and Solid packages bind the engine to a component's lifecycle and expose its state reactively. They render nothing.

| Framework | Install | Requires |
| - | - | - |
| Vue | `npm install tally-vue tally-core vue` | Vue 3.5 or newer |
| Svelte | `npm install tally-svelte tally-core svelte` | Svelte 5.7 or newer |
| Solid | `npm install tally-solid tally-core solid-js` | Solid 1.9 or newer |

The Svelte package ships rune modules, so it is compiled by your Svelte toolchain.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.