Component Lab

Interactive · client-side

Component Lab

Playground for reusable components and interaction patterns.

Build. Polish. Ship.

Swipe the gallery, then explore the experiments—each block is a self-contained pattern you can lift into a product surface.

Swiper + gesturesMotion & micro-UI

Browser

/components

component-lab.preview

UI Experiments

Micro-interactions, motion, and CSS details—things that are hard to describe on a CV but easy to feel in the UI.

Card Gallery Swiper

npm: card-gallery-swiper github repo

Powered by card-gallery-swiper (npm): container-aligned scrolling cards with modal preview and responsive sizing controls.

React Animated Gallery

npm: react-animated-gallery github repo

Powered by react-animated-gallery (npm): three visible slots stay distinct, and updates run in sequence every 3s (right → center → left).

Battery CTA

Custom SVG charge layers + gradient typography—built for hero CTAs, not generic shadcn defaults.

React Column Drag Resize Table

Drag or touch column headers to reorderDrag or touch the right edge of a header to resize

ID	Pattern	Category	Status	Notes
1	Column drag + resize	Data grid	shipped	Persist layout via localStorage when uncontrolled
2	Filter toolbar	UX	shipped	Text filters with optional controlled state
3	Pagination	UX	shipped	Page size presets; works after filtering
4	Custom cell render	API	shipped	render(row) for badges, money, links
5	CSS variable theming	Styling	shipped	Override --rdt-* tokens per surface

Rows: 12 of 12 · Page 1/3 · 5 per page

npm: react-column-drag-resize-table github repo

Powered by react-column-drag-resize-table (npm): drag headers to reorder columns, drag edges to resize, filter rows, and paginate—same package published to npm for dashboards and internal tools.

Playground for reusable components and interaction patterns.Playground for reusable components and interaction patterns.

Playground for reusable components and interaction patterns.