@4ulabs/ui

Component Showcase

v0.1.0 primitives plus DS-4 blocks: form (RHF+Zod), data-table (TanStack), and Zustand store pattern. Toggle light/dark to verify tokens and contrast.

Form

react-hook-form + Zod. Use case: typed fields with accessible errors. Antipattern: hand-rolled validation that skips aria-invalid / aria-describedby.

Shown on invoices and profiles.

Data Table

TanStack Table. Use case: declarative columns with sort/filter/pagination. Antipattern: copy-pasting a 200-line table into every screen.

RoleEmail
Ada LovelaceEngineerada@4ulabs.com.br
Grace HopperArchitectgrace@4ulabs.com.br
Alan TuringResearchalan@4ulabs.com.br

Page 1 of 2

Store Pattern

Zustand client UI store. Use case: panel open, wizard step, ephemeral filters. Antipattern: caching server entities in Zustand.

Client UI state via Zustand selectors. Do not put server cache here.