// components
Component catalog
Every design-system component in every state, fed only by @/lib/fixtures and @/lib/copy. Interactive ones are backed by demo-widgets.tsx.
01 · atoms
Atoms
language-dot
repo-stats-row
stars + forks + license + updated
brand new — null stars render as absence, never “0”
time-ago
preformatted string / semantic <time> with a title tooltip
copy-button
git clone github.com/mollybuilds/tinysynththeme-toggle
02 · social
Social
stat-button
like — inactive / active / count-null (absence) / disabled
save — inactive / active
follow-button
follow / following
avatar-stack
within max / collapsed into a +N overflow chip
user-hover-card
hover or focus the username
sign-in-github
03 · cards
Cards
project-card
feed — with screenshot + tags
feed — brand new (null stars/likes, no screenshot)
feed — og-image media (GitHub hotlink, broken-image fallback on error)
compact — no media, no tags
skeleton-card
with media / without
empty-state
default message
custom children — invitation + a way out
nothing here yet — go find something weird
browse projects04 · shell
Shell
site-header
site-footer
page-shell
mx-auto, max-w-[1120px], px-6 — this page is built on it
section-header
00 · example
A section header
With an optional note.
callout
default / positive / destructive
05 · project
Project
markdown-prose
bare
tinysynth
a 2KB web synth you can play with your keyboard. no deps, no build step, no reason.
why
- I wanted to know how small a playable synth could get
- turns out: pretty small
- try the live demo — mash your keyboard
usage
import { synth } from 'https://esm.sh/tinysynth'
synth({ wave: 'square', octave: 3 }).attach(document)
pass wave: 'sine' | 'square' | 'saw' and an octave. that's the whole API.
keys
| key | note |
|---|---|
A | C4 |
W | C#4 |
S | D4 |
D | E4 |
built in a weekend. sounds like it, in a good way.
README card chrome + fork nudge
tinysynth
a 2KB web synth you can play with your keyboard. no deps, no build step, no reason.
why
- I wanted to know how small a playable synth could get
- turns out: pretty small
- try the live demo — mash your keyboard
usage
import { synth } from 'https://esm.sh/tinysynth'
synth({ wave: 'square', octave: 3 }).attach(document)
pass wave: 'sine' | 'square' | 'saw' and an octave. that's the whole API.
keys
| key | note |
|---|---|
A | C4 |
W | C#4 |
S | D4 |
D | E4 |
built in a weekend. sounds like it, in a good way.
screenshot-gallery
update-post
v0.3 — tiny reverb
3 days agoadded a reverb. it's 300 bytes. i'm unreasonably proud of it. also fixed the bug where holding five keys summoned a demon frequency.
profile-header
feed-filters
06 · primitives
shadcn primitives
src/components/ui/* — restyled via className, never edited directly.
button
variants
sizes
badge
input · textarea · label
select
switch
tabs
toggle · toggle-group
avatar (raw primitive)
sizes / fallback initials / group + overflow count