Getting started

This guide will help you set up and start using the Roadie Design System in your project.

Installation

Install the core package and component library:

pnpm add @oztix/roadie-core @oztix/roadie-components

Setup

1. Add font preconnect hints

Add these to your HTML <head> to reduce font loading latency:

<link rel="preconnect" href="https://assets.oztix.com.au" crossorigin />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

2. Configure your CSS

In your main CSS entry point (e.g. globals.css or index.css), import Roadie's CSS. This single import includes Tailwind CSS v4, all design tokens, theme variables, and base styles:

@import '@oztix/roadie-core/css';

3. Enable component class scanning

Tailwind v4 ignores node_modules by default, so it won't see the class strings inside Roadie's dist. If you're using @oztix/roadie-components, add one import — it ships its own @source, so you never write a node_modules path:

@import '@oztix/roadie-core/css';
@import '@oztix/roadie-components/css';

Using widgets too? Add @oztix/roadie-widgets/css as well. Each package's CSS registers only its own classes, so include every package you use:

@import '@oztix/roadie-core/css';
@import '@oztix/roadie-components/css';
@import '@oztix/roadie-widgets/css';

Usage

Using components

Import and use components from @oztix/roadie-components. Components use the intent and emphasis props for styling:

import { Button } from '@oztix/roadie-components'


function MyComponent() {
  return (
    <div className='grid gap-4'>
      <h1 className='text-display-ui-3 text-strong'>Welcome</h1>
      <p className='text-subtle'>Get started with Roadie components.</p>
      <Button intent='accent' emphasis='strong'>
        Get started
      </Button>
    </div>
  )
}

Using intent and emphasis

The intent prop controls the color theme of a component:

<Button intent='neutral'>Default action</Button>
<Button intent='accent'>Primary action</Button>
<Button intent='danger'>Delete</Button>
<p className='intent-success'>Operation complete</p>

The emphasis prop controls the visual weight:

<Button emphasis='strong'>Strong button</Button>
<Button emphasis='normal'>Normal button</Button>
<Button emphasis='subtle'>Subtle button</Button>
<p className='text-subtle'>Secondary text</p>

Using Tailwind classes for layout

Use standard Tailwind CSS classes for layout, spacing, and custom styling:

function MyComponent() {
  return (
    <div className='grid gap-4 p-4'>
      <div className='grid grid-cols-2 gap-2'>
        <div>Item 1</div>
        <div>Item 2</div>
      </div>
    </div>
  )
}

Adding custom classes to components

All components accept a className prop for additional Tailwind classes:

<Button className='w-full' intent='brand' emphasis='strong'>
  Full width button
</Button>
<p className='max-w-prose text-lg'>
  Constrained width text block.
</p>

Features

The Roadie Design System includes:

  • Design tokens for colors, spacing, typography, and more
  • Pre-built React components with intent/emphasis API
  • Tailwind CSS v4 integration
  • Built-in dark mode support
  • Responsive design utilities
  • Semantic color scales for consistent theming

Next steps

Previous page← PhilosophyNext pageVue integration →