# Vue integration
> Use Roadie design tokens and utility classes in Vue applications without the React component library.
Roadie's core CSS layer works with any framework. It covers tokens, intents, emphasis, elevation, typography, and interaction utilities. This guide covers using Roadie in a Vue application where only the CSS foundation is needed.
The React component library (`@oztix/roadie-components`) is not compatible with Vue. Use the token and utility class system directly instead.
## Installation
Install the core package only:
```bash
pnpm add @oztix/roadie-core
```
You also need Tailwind CSS v4 and PostCSS:
```bash
pnpm add tailwindcss @tailwindcss/postcss postcss
```
## Setup
### 1. Configure PostCSS
Create or update `postcss.config.js`:
```js
export default {
plugins: {
'@tailwindcss/postcss': {}
}
}
```
### 2. Import Roadie CSS
In your main CSS entry point (e.g. `src/assets/main.css`):
```css
@import '@oztix/roadie-core/css';
```
This single import includes Tailwind CSS v4, all design tokens, the reset, and every utility class.
### 3. Add font preconnect hints
Add these to your `index.html` ``:
```html
```
## Usage
### Layout
Use [grid-first layout](https://ticketsolutionsptyltd.github.io/roadie/foundations/layout.md) with Tailwind utility classes:
```html
Dashboard
Card 1
Card 2
Card 3
```
### Buttons
Use the `btn` base class with a size (`btn-sm`, `btn-md`, `btn-lg`) plus [intent](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md), [emphasis](https://ticketsolutionsptyltd.github.io/roadie/tokens/), and [interaction](https://ticketsolutionsptyltd.github.io/roadie/foundations/interactions.md) utilities:
```html
```
Available sizes: `btn-xs` (24px), `btn-sm` (32px), `btn-md` (40px), `btn-lg` (48px). Icon buttons use `btn-icon-xs` through `btn-icon-lg`.
### Intent and emphasis
Set [color context](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md) with `intent-*` classes. Children inherit the palette automatically via CSS cascade:
```html
This text is also accent-tinted.
```
See the [tokens overview](https://ticketsolutionsptyltd.github.io/roadie/tokens/) for how intent and [emphasis](https://ticketsolutionsptyltd.github.io/roadie/tokens/) work together.
### Typography
Use the [display utility classes](https://ticketsolutionsptyltd.github.io/roadie/foundations/typography.md) for headings and standard Tailwind for body text:
```html
```
### Elevation
[Shadows](https://ticketsolutionsptyltd.github.io/roadie/foundations/elevation.md) are tinted by the current intent:
```html
Accent-tinted shadow
Raised surface with rim-light and shadow
```
### Form inputs
Style form inputs with the [`is-interactive-field`](https://ticketsolutionsptyltd.github.io/roadie/foundations/interactions.md) utility for automatic state transitions (neutral at rest, accent on focus, danger when invalid):
```html
We'll never share your email.
```
For composite inputs (e.g. an input with an attached button), use [`is-interactive-field-group`](https://ticketsolutionsptyltd.github.io/roadie/foundations/interactions.md) on the wrapper:
```html
```
### Interactive elements
Use [`is-interactive`](https://ticketsolutionsptyltd.github.io/roadie/foundations/interactions.md) for buttons, cards, and clickable elements. It provides cursor, transitions, active scale, focus ring, and disabled state:
```html
Clickable card
```
### Shape
Follow the [shape tier system](https://ticketsolutionsptyltd.github.io/roadie/foundations/shape.md) for consistent border-radius:
| Tier | Class | Use for |
| --------- | -------------- | -------------------------- |
| Inline | `rounded-sm` | Marks, highlights |
| Small | `rounded-md` | Code, prose images |
| Field | `rounded-lg` | Inputs, textareas, selects |
| Container | `rounded-xl` | Cards, popovers |
| Large | `rounded-2xl` | Modals, dialogs |
| Full | `rounded-full` | Buttons, badges, pills |
### Dark mode
Toggle dark mode by adding the `dark` class to the `` element. All tokens adapt automatically, so you need no `dark:` variants.
For SSR-safe dark mode without flash, use the theme script from `@oztix/roadie-core/theme`:
```js
import { getThemeScript } from '@oztix/roadie-core/theme'
```
Inject the script output into your `index.html` `` as a blocking `