UI & builders

These packages give apps/web its component layer: a shared design system sits at the bottom, and the form/site/table builders and data-table stack build on top of it to power the product's admin tooling.

@repo/design-system

The base UI kit — shadcn/radix-derived primitives, marketing blocks, and shared hooks/providers used by every other package in this group. It ships CSS (globals/tokens/themes) alongside the components, so consumers import both styles and components from it.

• ./globals.css, ./tokens.css, ./themes/*, ./styles/* — Tailwind globals, design tokens, and theme CSS
• ./components/* — primitives (button, dialog, command, combobox, chart, kanban, calendar, data-table pieces, form, and more)
• ./blocks/* — marketing/site blocks (hero, pricing, faq, testimonials, navbar, footer, app-sidebar)
• ./hooks/*, ./providers/*, ./lib/*, ./theme/* — supporting hooks, context providers, and utilities

@repo/auth-ui

Better Auth UI screens for apps/web, built on better-auth-ui and @repo/design-system. Provides the account/session chrome so the app doesn't hand-roll auth forms.

• . (src/index.ts) — package entry point
• ./components/* — auth-card, account-settings, settings-dialog, user-menu
• ./providers/* — auth-provider

@repo/data-table

A TanStack Table wrapper for building filterable, sortable, paginated admin tables, with both client-side and server-driven (URL-search-param-backed) variants.

• DataTable / ServerDataTable — client and server-driven table components (src/components/data-table/)
• Advanced filter toolbar — faceted filter, multi-filter, filter combobox (src/components/data-table/advanced/)
• useDataTable / useServerDataTable / useScopedSearchParams — hooks wiring table state to URL search params (src/lib/hooks/)
• src/config/ — pagination and table config helpers

@repo/form-builder

The UI half of the web app's forms feature — a drag-and-drop form builder with live preview, AI-assisted generation, and generated-code export. The server half (schema + /api/forms) lives in @repo/db/apps/web.

• ./components/* — builder surface (form-builder-base, form-preview, multi-step-form-preview, forms-list-sidebar, my-forms, new-form), form elements (select/dropdown/rating/password/file-upload), code panel and viewer, and ai/ai-form-generator
• ./hooks/*, ./lib/*, ./constants/*, ./types/* — builder state, helpers, and shared types

@repo/site-builder

The UI half of the web app's sites feature — a block-based site builder (canvas + block palette + props sheet) that renders @repo/design-system blocks and exports generated code, mirroring @repo/form-builder's shape.

• ./components/* — site-builder, site-canvas, site-block-palette, block-props-sheet, render-site-block, my-sites, new-site, generated-code/site-code-panel
• ./hooks/*, ./lib/*, ./constants/*, ./types/* — builder state, helpers, and shared types

@repo/table-builder

The UI half of the web app's tables feature — define a dataset (columns

• rows), edit it local-first, and publish it for reuse elsewhere on the site. Mirrors @repo/form-builder; the server half is @repo/db's dataset table + /api/tables.

• MyTables — list/create/delete the caller's datasets
• TableBuilder — fetch a dataset and render the editable grid
• PublishedTable — read-only server-rendered view of a published dataset
• Dataset / DatasetColumn / DatasetRow / DatasetColumnType — shared types (src/types.ts)
• Row edits are backed by a local-first TanStack DB collection (@repo/local-db); column types (v1): text, number, date, boolean, with inline edit and CSV/TSV paste import

@repo/hooks

Small, framework-agnostic React hooks shared across the monorepo — no builder- or design-system-specific logic, just generic browser/DOM utilities.

• use-debounce, use-idle, use-mount, use-hydration-guard
• use-media-query, use-window-size, use-document-size
• use-intersection-observer, use-is-visible, use-scroll-position, use-auto-scroll, use-copy-to-clipboard

See the packages overview and the architecture guide.