Rara Design System

Rara Design System is the shared React library that Rara Labs products are assembled from. It is published on npm under @dev-raralabs, documented against the Figma files it mirrors, and covers tokens, themes, components and ready-made templates. Hundreds of screens across the studio's products sit on top of it.

Enterprise software lives on dense tables, long forms and complicated page shells. Every team was reimplementing those slightly differently, which cost twice: once in the time to build a screen, and again in the inconsistency users had to absorb. The library had to be general enough for products that look nothing alike, without turning into a pile of props nobody can hold in their head.

• Built the data grid on top of TanStack Table. The library is headless by design, so what mattered was the layer above it: column definition helpers, server-driven pagination, sorting and filtering, column pinning and resizing, row selection that survives a page change, row virtualization for long result sets, and editable cells. A product team describes its columns and hands over a fetcher, and the grid does the rest.
• Designed the layout system as composition instead of configuration. Page shells, split panes, resizable inspectors and toolbars are compound components with slots, so a screen is expressed as structure in JSX while the library holds spacing, overflow and scroll containment correct. Density and breakpoints live inside the primitives, so product code does not deal with them.
• Standardised client state on Zustand. Anything that owns real state, like grid selection, filter panels, multi-step forms and the inspector, creates a store scoped to its instance instead of reaching into one global singleton, and every subscription goes through a selector so a keystroke in a filter does not rerender the grid beside it.
• Paired the grid with TanStack Query conventions so server state stays in the cache and the grid stays a view over it. Pagination and filter state map onto query keys, which makes a refetch cheap and an invalidation precise.
• Built the token and theme layer that keeps the React components in step with the Figma files, so a rebrand is a change to tokens instead of a sweep through component code.
• Packaged and versioned the library on npm, and kept the public API stable enough that product teams could upgrade without a rewrite.