import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Getting Started/Introduction" />

# MtAir

Calm, light-first React components built on [Radix](https://www.radix-ui.com/) primitives.
Simplicity, air, lightness — every interface should feel as open and uncluttered as a
deep breath.

This Storybook is the **development playground** — it is never published with the
package. Use it to browse every component, read its prop table (the **Docs** tab on
each story), and try props live in the **Controls** panel.

## Using the library in an app

```tsx
import '@olly/mt-air/styles.css';        // required — tokens + components
import '@olly/mt-air/fonts.css';         // optional — branded faces
import { ThemeProvider, TooltipProvider, Button } from '@olly/mt-air';

export function App() {
  return (
    <ThemeProvider>
      <TooltipProvider delayDuration={200}>
        <Button variant="primary">Click</Button>
      </TooltipProvider>
    </ThemeProvider>
  );
}
```

## Theme

Use the **Theme** toggle in the toolbar above to flip every story between light and
dark. In an app the same lever is `data-theme` on `<html>`, managed by
`ThemeProvider` / `useTheme()`.

## Fonts

Components read the `--mta-font-sans` and `--mta-font-mono` tokens. Import
`@olly/mt-air/fonts.css` for the branded faces (Plus Jakarta Sans + Fira Code), or
override those tokens to map the components onto fonts your app already loads.
