# App UI

> React components for pages the admin frames, styled only by the admin's 13 variables, so your app looks like the admin around it.

Source: https://storeware.ai/docs/extensions/app-ui

`@storeware/app-ui` is a small set of React components for your home, your panels and your actions' windows. They are styled by the 13 `--sw-*` variables the admin sends in [App Bridge](https://storeware.ai/docs/extensions/app-bridge)'s welcome and nothing else, so they follow the admin's colours, corners and type, whatever they are.

> **Early access.** The CLI and the SDK are not on npm yet, so the commands below do not run for everyone. To build an app now, write to https://storeware.ai/contact.

```tsx
import { AppBridgeProvider } from '@storeware/app-bridge-react';
import { AppUiStyles, Button, Card, Page, Stack, TextField } from '@storeware/app-ui';

export function Home() {
  return (
    <AppBridgeProvider hostOrigin="https://app.storeware.ai">
      <AppUiStyles />
      <Page>
        <Card title="Greeting">
          <Stack>
            <TextField label="Greeting" hint="Shown above every review" name="greeting" />
            <Button variant="primary" type="submit">
              Save
            </Button>
          </Stack>
        </Card>
      </Page>
    </AppBridgeProvider>
  );
}
```

Put `AppUiStyles` once, near the root: it is the stylesheet, as a `style` element. `AppBridgeProvider` sets the variables. Without App Bridge, set them yourself with `bridge.applyTheme`.

## Components

| Component                         | What it is                                                                          |
| --------------------------------- | ----------------------------------------------------------------------------------- |
| `Page`                            | The page's ground: the admin's background, text colour and typeface                 |
| `Card`                            | A raised panel, with an optional `title`                                            |
| `Stack`, `Inline`                 | Children above one another, or side by side; `gap` is `tight`, `base` or `loose`    |
| `Heading`                         | A heading, `level` 1 to 3                                                           |
| `Text`                            | A paragraph; `tone` is `muted`, `ok`, `warn` or `bad`; `mono` for an id or a code   |
| `Button`                          | `variant` is `primary`, `secondary`, `plain` or `danger`                            |
| `TextField`, `Select`, `Checkbox` | Labelled controls; `hint` says what goes in, `error` what is wrong                  |
| `Badge`                           | A short status; `tone` is `ok`, `warn` or `bad`                                     |
| `Banner`                          | A message across the page, read out to screen readers                               |
| `Spinner`                         | Something on its way, with a `label` for screen readers; still under reduced motion |
| `Divider`                         | A hairline                                                                          |
| `EmptyState`                      | What a page shows before it has anything, with an `action`                          |

`Button`, `TextField`, `Select` and `Checkbox` take the usual attributes of the element they draw, such as `name`, `value` and `onChange`. The stylesheet is exported as `css` too, if you would rather put it in your own.

## The variables

| Variable                           | What it is                     |
| ---------------------------------- | ------------------------------ |
| `--sw-bg`                          | The page's background          |
| `--sw-surface`                     | Cards and anything raised      |
| `--sw-fg`                          | Text                           |
| `--sw-muted`                       | Secondary text                 |
| `--sw-line`                        | Hairlines and borders          |
| `--sw-accent`                      | The primary button             |
| `--sw-accent-fg`                   | Text on the primary button     |
| `--sw-ok`, `--sw-warn`, `--sw-bad` | Done, needs a look, went wrong |
| `--sw-radius`                      | Corners                        |
| `--sw-font-sans`, `--sw-font-mono` | Text, and what a machine says  |

Use them in your own CSS too, as `var(--sw-surface)`, and your own pieces will match.