# Roadie

> Roadie is Oztix’s design system: CSS tokens and utilities, React components, and charts, published as @oztix/roadie-core, @oztix/roadie-components, and @oztix/roadie-charts.

Links ending in `.md` are markdown versions of the docs pages, with each component’s props. The rest are HTML pages.

Import each component from its own subpath, such as `@oztix/roadie-components/button`. Style with Roadie’s semantic utilities and intents, never hardcoded colours or `dark:` variants.

Each package ships a `roadie.manifest.json` with the installed version’s exports, props, and deprecations. Claude Code users can install the `roadie@roadie` plugin for skills that build with Roadie. [Building with AI](https://ticketsolutionsptyltd.github.io/roadie/overview/ai.md) covers both.

## Guides
- [Building with AI](https://ticketsolutionsptyltd.github.io/roadie/overview/ai.md): Set up Claude Code and other coding agents to build with Roadie: the plugin, its skills, and the docs agents read.
- [Changelog](https://ticketsolutionsptyltd.github.io/roadie/overview/changelog.md): What each Roadie release changed, and what the next one brings.
- [Installation](https://ticketsolutionsptyltd.github.io/roadie/overview/getting-started.md): Add Roadie to a React app: packages, CSS, and fonts.
- [Linting](https://ticketsolutionsptyltd.github.io/roadie/overview/linting.md): Catch Roadie mistakes in your app at lint time with @oztix/roadie-lint-plugin in oxlint, or in ESLint until your app can move.
- [Philosophy](https://ticketsolutionsptyltd.github.io/roadie/overview/philosophy.md): The core goals, principles, and mental model behind the Roadie Design System.
- [Vue integration](https://ticketsolutionsptyltd.github.io/roadie/overview/vue-integration.md): Use Roadie design tokens and utility classes in Vue applications without the React component library.

## Foundations
- [Foundations](https://ticketsolutionsptyltd.github.io/roadie/foundations.md): The principles and conventions every Roadie component builds on.
- [Colors](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md): OKLCH color system with intent-based semantic tokens for consistent theming.
- [Elevation](https://ticketsolutionsptyltd.github.io/roadie/foundations/elevation.md): Intent-tinted shadow scale for depth and hierarchy in light and dark modes.
- [Iconography](https://ticketsolutionsptyltd.github.io/roadie/foundations/iconography.md): Icon library, weight conventions, sizing scale, and import patterns for Phosphor Bold icons.
- [Shape](https://ticketsolutionsptyltd.github.io/roadie/foundations/shape.md): Border-radius scale for consistent, soft corners across all components.
- [Theming](https://ticketsolutionsptyltd.github.io/roadie/foundations/theming.md): ThemeProvider, dynamic accent colour, dark mode, and pre-hydration bootstrap: everything you need to theme a Roadie app at runtime or at build time.
- [Date and time](https://ticketsolutionsptyltd.github.io/roadie/foundations/date-and-time.md): One scale, seven rules, and one implementation for every date and time we show.
- [Layout](https://ticketsolutionsptyltd.github.io/roadie/foundations/layout.md): Layout principles, spacing scale, and best practices for building resilient layouts.
- [Prose styles](https://ticketsolutionsptyltd.github.io/roadie/foundations/prose.md): The .prose class: typeset raw HTML from a CMS, Markdown, or MDX with Roadie type, rhythm, and a readable measure.
- [Typography](https://ticketsolutionsptyltd.github.io/roadie/foundations/typography.md): Fluid type scale, pre-composed text styles, and semantic text colors.
- [Accessibility](https://ticketsolutionsptyltd.github.io/roadie/foundations/accessibility.md): Accessibility principles and testing guidance for building inclusive Oztix applications.
- [Interactions](https://ticketsolutionsptyltd.github.io/roadie/foundations/interactions.md): Interaction design principles and CSS utilities for building accessible, responsive UI.
- [Motion](https://ticketsolutionsptyltd.github.io/roadie/foundations/motion.md): Duration, easing, and animation tokens for purposeful, accessible motion.
- [View transitions](https://ticketsolutionsptyltd.github.io/roadie/foundations/view-transitions.md): Patterns for using the CSS View Transitions API with Roadie layouts. Covers z-index layering, named groups, keyframes, and search-param navigation.
- [Forms](https://ticketsolutionsptyltd.github.io/roadie/foundations/forms.md): Assembling forms from Field, Fieldset and Roadie controls: labels, required and invalid states, helper and error text.
- [Linking](https://ticketsolutionsptyltd.github.io/roadie/foundations/linking.md): A single href prop, automatic external-link safety, and one-line client routing through next/link via RoadieLinkProvider, across every link-bearing Roadie component.
- [Navigation](https://ticketsolutionsptyltd.github.io/roadie/foundations/navigation.md): How Navigator and Pane fit together: four parts, one pane per URL level, and nested layouts that render them
- [Performance](https://ticketsolutionsptyltd.github.io/roadie/foundations/performance.md): Frontend performance principles for building fast, responsive Oztix applications.
- [Records model](https://ticketsolutionsptyltd.github.io/roadie/foundations/records.md): Fields describe a list once, and a view saves its search, filters, sort, and layout as JSON that means the same in the browser, on a server, in Meilisearch or Elasticsearch, and in a URL.
- [Tables](https://ticketsolutionsptyltd.github.io/roadie/foundations/tables.md): Which table fits the job, and how common Oztix records look in a pane, on a phone, in a dashboard, on a detail page, and in a PDF.

## Content
- [Content](https://ticketsolutionsptyltd.github.io/roadie/content.md): How Oztix writes in docs, interfaces, support, and marketing.
- [Voice and tone](https://ticketsolutionsptyltd.github.io/roadie/content/voice-and-tone.md): Who Oztix sounds like, and how the tone shifts with the moment and the market.
- [Language and grammar](https://ticketsolutionsptyltd.github.io/roadie/content/language-and-grammar.md): The words, grammar, punctuation, and formats Oztix uses everywhere it writes.
- [Writing with AI](https://ticketsolutionsptyltd.github.io/roadie/content/writing-with-ai.md): The habits that mark a draft as machine written, and how to edit them out.
- [Interface copy](https://ticketsolutionsptyltd.github.io/roadie/content/interface-copy.md): How to write button labels, form help, errors, empty states, confirmations, and toasts, each shown on its Roadie component.

## Brand
- [Brand](https://ticketsolutionsptyltd.github.io/roadie/brand.md): How the Oztix brand looks and sounds outside a single interface, and how its parts work together.
- [Colour](https://ticketsolutionsptyltd.github.io/roadie/brand/colour.md): The brand palette, named like stage lighting, and how to use it across digital, print, and partner work.
- [Typography](https://ticketsolutionsptyltd.github.io/roadie/brand/typography.md): Intermission, the four weights the brand uses, and the text styles that set its hierarchy.
- [Logo](https://ticketsolutionsptyltd.github.io/roadie/brand/logo.md): The Oztix logo, its primary and secondary lockups, colours, clear space, minimum sizes, and downloads.
- [Pattern](https://ticketsolutionsptyltd.github.io/roadie/brand/pattern.md): The partnership flow, a swirl pattern that adds texture and energy without competing with the content.
- [Illustration](https://ticketsolutionsptyltd.github.io/roadie/brand/illustration.md): The three tiers of brand illustration, hero, feature, and spot, and a library of every spot illustration to copy or download.
- [Photography](https://ticketsolutionsptyltd.github.io/roadie/brand/photography.md): Authentic, dynamic, and inclusive photography of events, people, partners, and venues, and how to pair it with the pattern.

## Components
- [Components](https://ticketsolutionsptyltd.github.io/roadie/components.md): Accessible React components built on Base UI, styled with intent and emphasis.
- [Breadcrumb](https://ticketsolutionsptyltd.github.io/roadie/components/breadcrumb.md): A navigation trail showing the current page location within a hierarchy
- [Link](https://ticketsolutionsptyltd.github.io/roadie/components/link.md): A text link that routes through your app’s router and underlines to match its emphasis
- [Navigator](https://ticketsolutionsptyltd.github.io/roadie/components/navigator.md): A full-height app frame with one set of destinations, drawn as a vertical navigation on large screens and a floating tab bar on phones
- [Steps](https://ticketsolutionsptyltd.github.io/roadie/components/steps.md): A multi-step wizard for guiding users through sequential tasks
- [Tabs](https://ticketsolutionsptyltd.github.io/roadie/components/tabs.md): Tabbed navigation between related views with an animated active indicator.
- [Accordion](https://ticketsolutionsptyltd.github.io/roadie/components/accordion.md): Vertically stacked collapsible content sections
- [Collapsible](https://ticketsolutionsptyltd.github.io/roadie/components/collapsible.md): A single panel that a trigger shows and hides
- [Pane](https://ticketsolutionsptyltd.github.io/roadie/components/pane.md): A scrolling column in an app frame, with a sticky header and footer and a place in the stack when panes share a screen
- [ScrollArea](https://ticketsolutionsptyltd.github.io/roadie/components/scroll-area.md): A scroll container with a consistent custom scrollbar
- [Separator](https://ticketsolutionsptyltd.github.io/roadie/components/separator.md): A visual divider between content sections
- [Button](https://ticketsolutionsptyltd.github.io/roadie/components/button.md): An interactive control that triggers an action when pressed
- [IconButton](https://ticketsolutionsptyltd.github.io/roadie/components/icon-button.md): A square button for icon-only actions
- [Toggle](https://ticketsolutionsptyltd.github.io/roadie/components/toggle.md): A button that stays pressed or unpressed, such as favourite or bold
- [Toggle group](https://ticketsolutionsptyltd.github.io/roadie/components/toggle-group.md): A segmented control for picking a view, a date range or a set of options
- [Toolbar](https://ticketsolutionsptyltd.github.io/roadie/components/toolbar.md): A row of buttons, toggles, links, and menus that takes one Tab stop
- [Editor](https://ticketsolutionsptyltd.github.io/roadie/components/editor.md): A rich-text field that saves its content as an EditorValue
- [Field](https://ticketsolutionsptyltd.github.io/roadie/components/field.md): A compound wrapper for labelled form fields with helper and error text
- [Fieldset](https://ticketsolutionsptyltd.github.io/roadie/components/fieldset.md): A compound wrapper for grouping related form fields with a legend
- [Input](https://ticketsolutionsptyltd.github.io/roadie/components/input.md): A text input field for collecting user data
- [Label](https://ticketsolutionsptyltd.github.io/roadie/components/label.md): A styled label for form controls
- [Number field](https://ticketsolutionsptyltd.github.io/roadie/components/number-field.md): A number input with buttons to step the value down and up
- [OTP field](https://ticketsolutionsptyltd.github.io/roadie/components/otp-field.md): A one-time code input with one slot per character
- [Query field](https://ticketsolutionsptyltd.github.io/roadie/components/query-field.md): A search field that turns what you type into filter chips
- [Textarea](https://ticketsolutionsptyltd.github.io/roadie/components/textarea.md): A multi-line text input for longer form content
- [Autocomplete](https://ticketsolutionsptyltd.github.io/roadie/components/autocomplete.md): A text input with suggestions that optionally complete your typing
- [Checkbox](https://ticketsolutionsptyltd.github.io/roadie/components/checkbox.md): A box people tick to opt in, or to pick any number of options from a set
- [Combobox](https://ticketsolutionsptyltd.github.io/roadie/components/combobox.md): A searchable dropdown for filtering and selecting from a list of options
- [Radio group](https://ticketsolutionsptyltd.github.io/roadie/components/radio-group.md): A group of radio buttons for selecting one option from a set
- [Select](https://ticketsolutionsptyltd.github.io/roadie/components/select.md): A dropdown for choosing from a list of options
- [Slider](https://ticketsolutionsptyltd.github.io/roadie/components/slider.md): A track with a thumb to drag for a number or a range
- [Switch](https://ticketsolutionsptyltd.github.io/roadie/components/switch.md): An on or off control for a setting that applies straight away
- [Calendar](https://ticketsolutionsptyltd.github.io/roadie/components/calendar.md): A month or week grid for choosing a date, several dates or a range
- [CalendarTile](https://ticketsolutionsptyltd.github.io/roadie/components/calendar-tile.md): A two-row tile showing a month and a day
- [Countdown](https://ticketsolutionsptyltd.github.io/roadie/components/countdown.md): Time remaining, rendered as a time element
- [Date field](https://ticketsolutionsptyltd.github.io/roadie/components/date-field.md): A text field that reads a typed date, such as "14 mar" or "next fri", and suggests dates as you type
- [Date picker](https://ticketsolutionsptyltd.github.io/roadie/components/date-picker.md): A typed date field with a calendar to choose from, and a time when needed
- [Date range picker](https://ticketsolutionsptyltd.github.io/roadie/components/date-range-picker.md): A button showing a date range, opening presets, typed dates and a calendar
- [DateTime](https://ticketsolutionsptyltd.github.io/roadie/components/date-time.md): A date or a time, rendered as a time element
- [Duration](https://ticketsolutionsptyltd.github.io/roadie/components/duration.md): A length of time, rendered as a time element
- [Time field](https://ticketsolutionsptyltd.github.io/roadie/components/time-field.md): A text field that reads a typed time, such as "7:30pm" or "19:30"
- [Card](https://ticketsolutionsptyltd.github.io/roadie/components/card.md): A container for grouping related content with optional header and footer
- [Carousel](https://ticketsolutionsptyltd.github.io/roadie/components/carousel.md): Compound horizontal or vertical carousel built on Embla
- [List](https://ticketsolutionsptyltd.github.io/roadie/components/list.md): An iOS-style list for menus, pickers, and settings. Rows have inset hairline dividers, leading tiles, and auto chevrons.
- [Marquee](https://ticketsolutionsptyltd.github.io/roadie/components/marquee.md): An infinitely scrolling horizontal content strip
- [RecordGrid](https://ticketsolutionsptyltd.github.io/roadie/components/record-grid.md): A grid of record cards to search, filter, sort, and page through
- [RecordTable](https://ticketsolutionsptyltd.github.io/roadie/components/record-table.md): A table of records to search, filter, sort, and page through
- [Sortable](https://ticketsolutionsptyltd.github.io/roadie/components/sortable.md): A drag-to-reorder wrapper for lists and rows, with a Move menu on each handle for keyboard and screen reader users
- [Table](https://ticketsolutionsptyltd.github.io/roadie/components/table.md): Styled table primitives for any screen
- [Dialog](https://ticketsolutionsptyltd.github.io/roadie/components/dialog.md): A modal overlay that interrupts the page for a focused task
- [Drawer](https://ticketsolutionsptyltd.github.io/roadie/components/drawer.md): A surface that slides in from an edge and swipes away
- [Menu](https://ticketsolutionsptyltd.github.io/roadie/components/menu.md): A dropdown list of actions that opens from a button
- [Popover](https://ticketsolutionsptyltd.github.io/roadie/components/popover.md): An anchored panel that floats beside its trigger
- [Toast](https://ticketsolutionsptyltd.github.io/roadie/components/toast.md): A brief message that confirms an action or reports its result
- [Tooltip](https://ticketsolutionsptyltd.github.io/roadie/components/tooltip.md): A short label that appears beside a control on hover or focus
- [Badge](https://ticketsolutionsptyltd.github.io/roadie/components/badge.md): A compact label for status, counts, or categories
- [Callout](https://ticketsolutionsptyltd.github.io/roadie/components/callout.md): An inline message that sits in the flow of the page
- [Empty state](https://ticketsolutionsptyltd.github.io/roadie/components/empty-state.md): Communicates that a section or page has no content, with optional media, message, and actions.
- [Progress](https://ticketsolutionsptyltd.github.io/roadie/components/progress.md): A bar that shows how far a task has got while it runs
- [Skeleton](https://ticketsolutionsptyltd.github.io/roadie/components/skeleton.md): A placeholder that holds the space content will occupy while it loads
- [Avatar](https://ticketsolutionsptyltd.github.io/roadie/components/avatar.md): A person’s photo, with their initials or an icon when there is no photo
- [Icon Tile](https://ticketsolutionsptyltd.github.io/roadie/components/icon-tile.md): A tile that frames a single icon
- [Image](https://ticketsolutionsptyltd.github.io/roadie/components/image.md): A size-aware <img> that routes Oztix-CDN assets through the resize/transcode proxy
- [Logo](https://ticketsolutionsptyltd.github.io/roadie/components/logo.md): The Oztix logo, in its approved colours
- [Pattern](https://ticketsolutionsptyltd.github.io/roadie/components/pattern.md): The Oztix swirl pattern, cropped to fill a banner, panel, or strip in a fixed brand colour
- [QR code](https://ticketsolutionsptyltd.github.io/roadie/components/qr-code.md): A QR code for scanning tickets at the gate
- [SpotIllustration](https://ticketsolutionsptyltd.github.io/roadie/components/spot-illustration.md): Themed SVG illustrations that adapt to the design system color palette
- [Code](https://ticketsolutionsptyltd.github.io/roadie/components/code.md): Inline code snippet with emphasis and intent variants.
- [Highlight](https://ticketsolutionsptyltd.github.io/roadie/components/highlight.md): Query-based substring highlighting using Mark.
- [Kbd](https://ticketsolutionsptyltd.github.io/roadie/components/kbd.md): A keyboard key or shortcut, drawn as a keycap
- [Mark](https://ticketsolutionsptyltd.github.io/roadie/components/mark.md): Highlighted text using the HTML mark element with intent variants.
- [Prose](https://ticketsolutionsptyltd.github.io/roadie/components/prose.md): Typesets rich HTML from a CMS, Markdown, or user content.

## Charts
- [Charts](https://ticketsolutionsptyltd.github.io/roadie/charts.md): Build dashboards and charts that read the same in every Oztix app
- [Data visualisation](https://ticketsolutionsptyltd.github.io/roadie/charts/data-visualisation.md): How to choose, colour, label, and write a chart so a client can act on it.
- [Dashboard design](https://ticketsolutionsptyltd.github.io/roadie/charts/dashboards.md): Put cards together into dashboards that read the same everywhere
- [Dashboard](https://ticketsolutionsptyltd.github.io/roadie/charts/dashboard.md): A grid of named card sizes that reflows by its own width
- [Dashboard period](https://ticketsolutionsptyltd.github.io/roadie/charts/dashboard-period.md): A dashboard’s period and what it compares with, in one picker
- [DataCard](https://ticketsolutionsptyltd.github.io/roadie/charts/data-card.md): The shared card for dashboards: a label, a number or a sentence, and a body
- [StatTile](https://ticketsolutionsptyltd.github.io/roadie/charts/stat-tile.md): One number with its change, what it compares against, and its recent trend
- [Meter](https://ticketsolutionsptyltd.github.io/roadie/charts/meter.md): Progress towards a maximum, with an optional target
- [Sparkline](https://ticketsolutionsptyltd.github.io/roadie/charts/sparkline.md): A small line of recent history
- [DataTable](https://ticketsolutionsptyltd.github.io/roadie/charts/data-table.md): A data-driven table with inline sparklines and meters
- [Delta](https://ticketsolutionsptyltd.github.io/roadie/charts/delta.md): A change with an arrow, coloured by whether it is good or bad
- [LineChart](https://ticketsolutionsptyltd.github.io/roadie/charts/line-chart.md): A line over time, with the quiet reading aids a pace chart needs
- [BarChart](https://ticketsolutionsptyltd.github.io/roadie/charts/bar-chart.md): Bars over time, with an optional second measure labelled at its end
- [RankedBars](https://ticketsolutionsptyltd.github.io/roadie/charts/ranked-bars.md): Horizontal bars sorted largest first, for channels, places and brackets
- [StackedBars](https://ticketsolutionsptyltd.github.io/roadie/charts/stacked-bars.md): Bars split into segments, as counts or stacked to 100%
- [StackedArea](https://ticketsolutionsptyltd.github.io/roadie/charts/stacked-area.md): Layers stacked over time, for a part of a whole as it changes
- [Histogram](https://ticketsolutionsptyltd.github.io/roadie/charts/histogram.md): How a number spreads, such as booking lead time or tickets per order
- [Funnel](https://ticketsolutionsptyltd.github.io/roadie/charts/funnel.md): Steps people pass through, with the conversion and drop-off between them
- [Heatmap](https://ticketsolutionsptyltd.github.io/roadie/charts/heatmap.md): A grid coloured by value, such as orders by weekday and hour
- [Scatter](https://ticketsolutionsptyltd.github.io/roadie/charts/scatter.md): Points by two measures, with named quadrants for a portfolio view
- [SmallMultiples](https://ticketsolutionsptyltd.github.io/roadie/charts/small-multiples.md): One small line or bar chart per gate, show or channel, on one scale
- [Chart](https://ticketsolutionsptyltd.github.io/roadie/charts/chart.md): A dashboard card for one chart, with its table view and source
- [ChartLegend](https://ticketsolutionsptyltd.github.io/roadie/charts/chart-legend.md): A key whose shapes match the marks
- [ChartPatterns](https://ticketsolutionsptyltd.github.io/roadie/charts/chart-patterns.md): Texture patterns that keep chart series apart without colour
- [ChartTooltip](https://ticketsolutionsptyltd.github.io/roadie/charts/chart-tooltip.md): The look of chart tooltips
- [Show dashboard](https://ticketsolutionsptyltd.github.io/roadie/charts/show-dashboard.md): How one show is selling, with pace against similar shows
- [Portfolio dashboard](https://ticketsolutionsptyltd.github.io/roadie/charts/portfolio-dashboard.md): How a promoter's upcoming shows are selling
- [Audience dashboard](https://ticketsolutionsptyltd.github.io/roadie/charts/audience-dashboard.md): Who is buying, where they live and how they get through checkout

## Tokens
- [All tokens](https://ticketsolutionsptyltd.github.io/roadie/tokens/reference.md): Search every variable, class, variant and keyframe Roadie core ships. Copy the variable or the class.
- [Color scales](https://ticketsolutionsptyltd.github.io/roadie/tokens/color-scales.md): Eight OKLCH palettes of 14 steps each, plus the accent parameters, pinned light steps and illustration colours.
- [Intents](https://ticketsolutionsptyltd.github.io/roadie/tokens/intents.md): The intent classes, the --intent-* roles they set, and the bg-, text- and border- utilities that read them.
- [Data visualisation](https://ticketsolutionsptyltd.github.io/roadie/tokens/dataviz.md): Chart colours for identity, amount, above or below a benchmark, and status, in light and dark.
- [Emphasis and states](https://ticketsolutionsptyltd.github.io/roadie/tokens/emphasis.md): Emphasis presets that set background, text, border and shadow together, and the interaction states that animate them.
- [Typography](https://ticketsolutionsptyltd.github.io/roadie/tokens/typography.md): Font families, the fluid size scale, line heights, letter spacing and the composed text styles.
- [Shape and layout](https://ticketsolutionsptyltd.github.io/roadie/tokens/shape.md): Tailwind's radius steps, Roadie's 5xl to 7xl additions, the container widths, the spacing unit, and the breakpoints.
- [Elevation and layering](https://ticketsolutionsptyltd.github.io/roadie/tokens/elevation.md): Intent-tinted shadows, inset shadows, rim light and the z-index scale.
- [Motion](https://ticketsolutionsptyltd.github.io/roadie/tokens/motion.md): Durations, easings, keyframes and the ready-made animation and transition classes.
- [Component utilities](https://ticketsolutionsptyltd.github.io/roadie/tokens/component-utilities.md): Button and calendar tile classes for templates without React, and the navigator-expanded variant.

## Widgets
- [Widgets](https://ticketsolutionsptyltd.github.io/roadie/roadie-widgets.md): Framework-agnostic, fully-featured widgets that share one core and ship React and Vue skins.
- [CartContents](https://ticketsolutionsptyltd.github.io/roadie/roadie-widgets/cart-contents.md): The day-grouped cart event/ticket list. It is the body of the cart drawer, exported on its own so you can render it on a standalone cart page.
- [CartDrawer](https://ticketsolutionsptyltd.github.io/roadie/roadie-widgets/cart-drawer.md): A docked, expandable cart for collection and event pages. It fetches its own summary and details, with React and Vue skins over a shared core.