dorkhub_ design

// 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

tag-chip

default / active / hash-prefixed / active + hash-prefixed

language-dot

TypeScriptGoPythonJavaScript

repo-stats-row

stars + forks + license + updated

TypeScript21412 forksMITupdated 3 days ago

brand new — null stars render as absence, never “0”

JavaScriptjust shipped

time-ago

preformatted string / semantic <time> with a title tooltip

3 days ago

copy-button

git clone github.com/mollybuilds/tinysynth

theme-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

@mollybuilds@gremlinworks
@mollybuilds@gremlinworks+2

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

gitgoblin

a cron job that writes passive-aggressive commit messages when you forget to push

Go67

featured — label bar + many tags (overflow stress test)

skeleton-card

with media / without

empty-state

default message

nothing here yet — go find something weird

custom children — invitation + a way out

nothing here yet — go find something weird

browse projects

04 · shell

Shell

site-footer

page-shell

mx-auto, max-w-[1120px], px-6 — this page is built on it

<PageShell>

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

keynote
AC4
WC#4
SD4
DE4

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

keynote
AC4
WC#4
SD4
DE4

built in a weekend. sounds like it, in a good way.

screenshot-gallery

tinysynth
audio
webaudio

update-post

v0.3 — tiny reverb

3 days ago

added 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

rosie

@rosiehux

hardware, plants, guilt-driven development

5 projects897 followers

06 · primitives

shadcn primitives

src/components/ui/* — restyled via className, never edited directly.

button

variants

sizes

badge

defaultsecondaryoutlinedestructive

input · textarea · label

select

switch

tabs

sorted by recent

toggle · toggle-group

avatar (raw primitive)

sizes / fallback initials / group + overflow count

mgr
mgr
+1

separator

above
below
left
right

tooltip

dialog

sheet

dropdown-menu

command

carousel

gitgoblin

a cron job that writes passive-aggressive commit messages when you forget to push

Go67

plantdad

an e-ink dashboard that guilt-trips me into watering my monstera

Python1.2kin 23 lists

sonner (toast)

search

search projects, people, and tags