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.
@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's welcome and nothing else, so they follow the admin's colours, corners and type, whatever they are.
Early access
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.