Senko-san
75 lines
2.0 KiB
Markdown
75 lines
2.0 KiB
Markdown
# 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.
|
|
|
|
## Install
|
|
|
|
Add the registry to your project `.npmrc`:
|
|
|
|
```
|
|
@olly:registry=https://git.ollyhearn.ru/api/packages/olly/npm/
|
|
```
|
|
|
|
Then install:
|
|
|
|
```bash
|
|
npm install @olly/mt-air
|
|
```
|
|
|
|
`react` and `react-dom` (>=18) are peer dependencies — your app provides them.
|
|
|
|
## Usage
|
|
|
|
```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
|
|
|
|
`ThemeProvider` manages a `data-theme` attribute (`light` / `dark`) on `<html>` and
|
|
persists the choice to `localStorage`. Read or change it anywhere with `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.
|
|
|
|
## Components
|
|
|
|
Badge, Button, Icon Button, Card, Callout, Dialog, Alert Dialog, List, Menu,
|
|
Progress, Scroll Area, Segmented Control, Select, Selection, Slider, Spinner, Table,
|
|
Tabs, Text Field, Tooltip.
|
|
|
|
Browse every component, its prop table, and live controls in Storybook (see below).
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm install # install dependencies
|
|
npm run dev # start the rsbuild dev server
|
|
npm run storybook # browse components in Storybook
|
|
npm run build # build the package for publishing
|
|
npm run lint # lint with rslint
|
|
npm run format # format with prettier
|
|
```
|
|
|
|
## Learn more
|
|
|
|
- [Rsbuild documentation](https://rsbuild.rs)
|
|
- [Storybook documentation](https://storybook.js.org)
|