Design system · Jun – Oct 2026
Tables that don’t fight you
Two dashboards had each grown their own filter chips and tables, and they had drifted apart. I moved them into our open-source design system and kept it shipping.
- Role
- Maintainer
- When
- Jun – Oct 2026
- Where
- PayGlocal
- Stack
- ReactTailwind v4RadixVitesttsup
The situation
Data-heavy screens were inconsistent: filters behaved differently on each page, tables broke on narrow screens and shadows were hand-picked per component.
What I built
- A data table with server pagination, keyboard row click, expandable rows and a right-pinned row action.
- Seven filter chip types with a group that manages focus, plus column manager, copyable cells and a card list for phones.
- Searchable selects and a date picker with time, scroll-locked inside dialogs.
- Named elevation tokens across about 35 components.
- Most releases from 0.2.1 to 0.3.19, with tests and a fix so the bundle works in the Next.js App Router.
Try it
| Payment | From | Status | Amount |
|---|
Decisions
Apply and Clear both close the chip
Small rule, big calm: a filter chip never stays open in a half-applied state.
Outcome
| What | Before | After | Change |
|---|---|---|---|
| Releases cut | 0.2.1 | 0.3.19 | ~20 |
| Components on elevation tokens | 0 | ~35 | unified |
Next projectAI design agent →An in-app chat that lets designers change real UI code, with guardrails that keep it away from secrets and production.