GenUI
v0.0.1 — Now Available

IntroducingGenUI Systems

Ready-to-use React infrastructure for building complex dashboard apps. Smart forms, polymorphic tables, and intent-based layouts — all local to your codebase.

Registry-based
Zero runtime deps
Fully typed
form-example.tsx
1import { GenericForm } from '@/components/systems/generic-form/generic-form'
2import { z } from 'zod'
3
4const schema = z.object({
5  email: z.string().email(),
6  role: z.enum(['admin', 'user']),
7})
8
9<GenericForm
10  schema={schema}
11  onSubmit={handleSubmit}
12  fields={{
13    email: { type: 'email', label: 'Email' },
14    role: { type: 'select', label: 'Role' },
15  }}
16/>
9 Core Systems

Everything you need.
Nothing you don't.

Each system is self-contained, fully typed, and installable via the registry. Copy what you need, own your code.

GenericForm

Schema-driven forms with Zod validation, field registry, and automatic error handling.

Zod schemasField registryAsync validation
Learn more

GenericGrid

Intent-based layout system. Declare purpose, not CSS grid decisions.

Intent-basedResponsiveGap control
Learn more

GenericList

Schema-aware list rendering with grouping, sorting, and filtering built-in.

GroupingSortingVirtualization
Learn more

GenericTable

Full-featured data tables with sorting, filtering, pagination, and selection.

Column configSelectionPagination
Learn more

GenericRenderer

Type-safe data rendering with fallbacks, formatters, and error boundaries.

Type-safeFallbacksFormatters
Learn more

ActionSystem

Unified intent handling for user interactions. Buttons, links, and triggers.

Intent-basedLoading statesConfirmations
Learn more

StateBoundary

State → UI mapping. Loading, error, empty, and success states handled.

Loading UIError handlingEmpty states
Learn more

MotionSystem

Declarative animations with reduced-motion support and preset transitions.

PresetsReduced motionStagger
Learn more

AppLayout

Responsive layout primitives. Stack, sidebar, grid, and cluster patterns.

StackSidebarResponsive
Learn more
Philosophy

Not a component library.
The layer above it.

Registry-based distribution

Install via npx, copy into your repo. No node_modules bloat, no version conflicts. You own the code.

npx genui add form
npm install @genui/form

Headless-first architecture

Zero styling opinions. Works with Tailwind, CSS Modules, styled-components, or vanilla CSS.

Bring your own design system
Fight against opinionated styles

Schema-driven APIs

Zod schemas define your data. Forms, tables, and lists derive their behavior from types.

Define once, use everywhere
Repeat validation logic

Intent over implementation

Declare what you want, not how to build it. intent="primary" instead of className="bg-blue-500".

<Action intent="destructive" />
<Button className="bg-red-500" />
Examples

Clean APIs. Real code.

1import { GenericForm } from '@/genui/form'
2import { z } from 'zod'
3
4const userSchema = z.object({
5  name: z.string().min(2),
6  email: z.string().email(),
7  role: z.enum(['admin', 'editor', 'viewer']),
8  notifications: z.boolean().default(true),
9})
10
11export function UserForm() {
12  return (
13    <GenericForm
14      schema={userSchema}
15      onSubmit={async (data) => {
16        await createUser(data)
17      }}
18      fields={[
19        { name: 'name', label: 'Full Name' },
20        { name: 'email', type: 'email' },
21        { name: 'role', type: 'select', options: roles },
22        { name: 'notifications', type: 'switch' },
23      ]}
24    />
25  )
26}
Get Started

Three commands.
Zero config.

1

Install a system

Use the shadcn CLI to add GenUI systems directly to your project.

npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/form
2

Handle peer dependencies

If you use React 19, enable legacy peer deps for compatibility with some primitives.

npm config set legacy-peer-deps true
3

Start building

Import the system and start building complex logic with semi-atomic components.

import { GenericForm } from '@/components/systems/generic-form/generic-form'