https://github.com/sorawitt/preact-signals-example
A small Preact + Signals dashboard that lets you add teammates and see how shared signals, computed state, and Tailwind styling fit together.
https://github.com/sorawitt/preact-signals-example
bun example preact preact-signals tailwindcss typescript
Last synced: 3 months ago
JSON representation
A small Preact + Signals dashboard that lets you add teammates and see how shared signals, computed state, and Tailwind styling fit together.
- Host: GitHub
- URL: https://github.com/sorawitt/preact-signals-example
- Owner: sorawitt
- Created: 2025-11-09T09:50:00.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-11-09T09:52:09.000Z (3 months ago)
- Last Synced: 2025-11-09T11:29:13.372Z (3 months ago)
- Topics: bun, example, preact, preact-signals, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 27.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-preact-signals
A tiny Preact + Signals playground where you can add teammates in a clean little dashboard, perfect for seeing shared state, simple computed logic, and Tailwind styling work side by side without a ton of boilerplate.
## Features
- Minimal roster dashboard built with Preact + TypeScript
- Global state handled via Preact Signals (draft user, roster, helpers)
- Tailwind CSS for quick, readable styling
- Friendly empty state and trimmed form inputs
## Tech Stack
- [Preact](https://preactjs.com/) + [@preact/signals](https://github.com/preactjs/signals)
- [Tailwind CSS](https://tailwindcss.com/)
- [Vite](https://vitejs.dev/)
- [Bun](https://bun.sh/) (dependency manager + dev server)
## Getting Started
1. **Install dependencies**
```bash
bun install
```
2. **Start the dev server**
```bash
bun dev
```
3. Open `http://localhost:5173` and add your first teammate.
## Scripts
| Command | Description |
| ------------ | ----------------------------- |
| `bun dev` | Start Vite dev server |
| `bun run build` | Type-check + build for prod |
| `bun preview` | Preview the production build |
## Project Notes
- Shared state lives in `src/signals/store.tsx` with signals, computed state (`roster`), and helpers (`prependUser`, `resetUserDraft`).
- The form (`src/components/UserForm.tsx`) writes to `userDraft`, trims values, and prepends a new user.
- The table (`src/components/UserTable.tsx`) reads `roster.value` and shows a Thai empty message when no records exist.
Feel free to fork, tweak the styles, or extend the roster logic to practice more with Signals.