> ## Documentation Index
> Fetch the complete documentation index at: https://developers.tassyir.io/llms.txt
> Use this file to discover all available pages before exploring further.
# @tassyir/ui
> Web components for Tassyir app pages: the dashboard's look (ink-on-paper tokens, right-to-left, dark mode) as custom elements that work in any framework or none.
Web components that make your app's page look like the
[Tassyir](https://tassyir.io) dashboard it runs in: ink on paper, hairline
borders, one cyan highlighter, Arabic right to left and English left to
right, light and dark. Assemble your page from these elements instead of
inventing styles, and it reads as part of the dashboard.
They are custom elements, so they work in any framework (React, Vue,
Svelte, Hono JSX) or none. Browser only, ESM only, no runtime dependency.
The package collects no analytics, uses no browser storage and makes no
network request. About 13.5 kB gzipped for every element.
## Install
```bash theme={null}
npm install @tassyir/ui @tassyir/app-bridge
```
## Example
Your manifest's `admin.page`, as plain HTML and TypeScript:
```html theme={null}
12 sent this week
Send requests
120 messages left.
| Order |
Total |
Status |
| #00001042 |
9.000 دج |
Pending |
```
```ts theme={null}
import { createAppBridge } from '@tassyir/app-bridge';
import { followDashboardContext } from '@tassyir/ui'; // also defines every element
const bridge = createAppBridge();
// The dashboard's language, direction and theme, on , now and on
// every change. The elements and the tokens follow.
followDashboardContext(bridge);
document
.querySelector('#settings')!
.addEventListener('submit', async (event) => {
event.preventDefault();
const settings = Object.fromEntries(
new FormData(event.currentTarget as HTMLFormElement),
);
// send `settings` to your server with a fresh ID token, then:
await bridge.toast.show({ message: 'Settings saved', tone: 'success' });
});
```
The fields submit with the `