# @kwtv/admin-components
> Astro components and React islands for the KWTV website admin panel, built on KWTV tokens.
Latest version **0.4.0** (published 2026-09-24) · UNLICENSED license · 0 weekly downloads
## Install
```sh
npm install @kwtv/admin-components
pnpm add @kwtv/admin-components
yarn add @kwtv/admin-components
bun add @kwtv/admin-components
```
## Health
**Score 60/100 (C)** — status: active.
Positive: esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads; no types; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.4.0 |
| Published | 2026-09-24 |
| First published | 2026-09-23 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 228.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nickbevers |
## Links
- npm: https://www.npmjs.com/package/@kwtv/admin-components
- Repository: https://github.com/KWTV-willebroek/design-system
- Homepage: https://github.com/KWTV-willebroek/design-system#readme
- Issues: https://github.com/KWTV-willebroek/design-system/issues
- npm.io page: https://npm.io/package/@kwtv/admin-components
## Dependencies (2)
- [@kwtv/tokens](https://npm.io/package/@kwtv/tokens.md) ^0.4.0
- [@tabler/icons-react](https://npm.io/package/@tabler/icons-react.md) ^3.48.0
## Recent versions
- 0.4.0 (latest) — 2026-09-24
- 0.3.0 — 2026-09-23
- 0.2.0 — 2026-09-23
## README
# @kwtv/admin-components
Admin panel components for the KWTV website, built from the KWTV admin design. The package follows the same split as `@kwtv/components`: presentational components are Astro; controls that manage interaction are React islands. The admin has its own tuned light and dark colour sets, defined in `admin.css`.
## Install
```bash
npm install @kwtv/admin-components @kwtv/tokens
```
Import both stylesheets once in your app root:
```astro
---
import "@kwtv/tokens/tokens.css";
import "@kwtv/admin-components/styles/admin.css";
import AdminButton from "@kwtv/admin-components/astro/AdminButton.astro";
import AdminStatusBadge from "@kwtv/admin-components/astro/AdminStatusBadge.astro";
---
```
Astro components render native controls and semantic markup without a React bundle. Inputs, selects, checkboxes, choices, and section cards use native browser behaviour. The switch is a `button` with `role="switch"`; its Astro version ships a small script that toggles it, and renders a hidden input when it has a `name`. For controls with app state, add Astro's React integration and hydrate the island:
```astro
---
import AdminCodeInput from "@kwtv/admin-components/react/AdminCodeInput.tsx";
---
```
Import several React components from `@kwtv/admin-components/react` when composing a React island. The React entry also includes presentational counterparts so those islands can stay self contained.
Wrap the admin in `.admin-theme`. Light is the default. Set `data-theme="dark"` on `` to switch to the dark set, or use `.admin-theme--light` and `.admin-theme--dark` to pin a theme, for example to show both side by side in a gallery. `is-hover`, `is-focus`, and `is-active` classes pin interaction states for visual review.
## Astro components
Icon, Button, IconButton, StatusBadge, Tag, LocaleMarks, Input, Select, PrefixInput, Switch, Checkbox, Choice, Avatar, Kbd, Thumb, Skeleton, Progress, Field, Alert, Note, SitePill, SaveState, Breadcrumbs, EmptyState, Meta, Steps, NavItem, Tooltip, PageHeader, Panel, Fields, RowList, Row, SiteStatus, SectionCard, SerpPreview.
## React islands
Textarea (counter and meter), CodeInput (one field, so paste and autofill work), Segmented, FilterButton, Toast and Toasts (duration, pause on hover and focus), Tabs, LocaleSwitch, Pager, Search (keyboard shortcut), AccountMenu, TopBar, ListToolbar, DataTable, PublishPanel, SectionRow, InsertPoint, DropLine, Tree, TreeItem, RichText, MediaGrid, MediaTile, MediaField, RecoveryCodes, Dialog, Drawer.
Icons are Tabler glyphs rendered as inline SVG with the `admin-ic` class. They size with `font-size`. The Astro icon component embeds only the glyphs used by the library; React islands use `@tabler/icons-react`. Import Hanken Grotesk in the application as on the public site.
---
_Source: https://npm.io/package/@kwtv/admin-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._