@geenius/ui

Framework-agnostic Geenius UI primitives, pages, and design tokens with React and SolidJS variants in Tailwind, standalone CSS, and library-backed React UI kits including HeroUI and Material UI.

Install

Install the root package plus the peer dependency for the framework you intend to use.

pnpm add @geenius/ui react react-dom

For the @geenius/ui/react-shadcn subpath, also install the Radix and utility peers that the published package imports, and keep Tailwind CSS configured in the consuming app:

pnpm add @geenius/ui react react-dom class-variance-authority clsx lucide-react tailwind-merge \
  @radix-ui/react-alert-dialog @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible \
  @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover \
  @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select \
  @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch \
  @radix-ui/react-tabs @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip

pnpm add @geenius/ui react react-dom daisyui

pnpm add @geenius/ui react react-dom antd @ant-design/icons

pnpm add @geenius/ui react react-dom @chakra-ui/react @emotion/react

pnpm add @geenius/ui react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled

pnpm add @geenius/ui react react-dom @mantine/core @mantine/hooks @mantine/dates @mantine/notifications dayjs

pnpm add @geenius/ui react react-dom @heroui/react @heroui/styles

pnpm add @geenius/ui solid-js

For the @geenius/ui/solidjs-ark subpath, also install Ark UI for Solid:

pnpm add @geenius/ui solid-js @ark-ui/solid

For the @geenius/ui/solidjs-kobalte subpath, also install Kobalte:

pnpm add @geenius/ui solid-js @kobalte/core

For the @geenius/ui/solidjs-solidui subpath, also install Kobalte. This variant vendors Solid UI-aligned recipes locally and uses Kobalte primitives where Solid UI does not ship a publishable runtime primitive:

pnpm add @geenius/ui solid-js @kobalte/core

Published subpaths

The package publishes these entry points:

import { DESIGN_TOKENS, generateId } from '@geenius/ui'
import type { ButtonVariant } from '@geenius/ui/shared'
import { Button, Dialog, UIShowcasePage, useToast } from '@geenius/ui/react'
import { Button as ShadcnButton, UIShowcasePage as ShadcnShowcasePage } from '@geenius/ui/react-shadcn'
import { Button as AntButton, Dialog as AntDialog, UIProvider as AntProvider } from '@geenius/ui/react-ant'
import { Button as ChakraButton, Dialog as ChakraDialog } from '@geenius/ui/react-chakra'
import { Button as CssButton, UITokensPage as ReactCssTokensPage } from '@geenius/ui/react-css'
import { Button as DaisyButton, UIProvider as DaisyProvider, UITokensPage as DaisyTokensPage } from '@geenius/ui/react-daisyui'
import { Button as MantineButton, Dialog as MantineDialog, UIProvider as MantineProvider } from '@geenius/ui/react-mantine'
import { Button as MuiButton, Dialog as MuiDialog, UIProvider as MuiProvider } from '@geenius/ui/react-mui'
import { Button as HeroButton, UITokensPage as HeroTokensPage, UIProvider as HeroProvider } from '@geenius/ui/react-heroui'
import { Button as NativeButton, UIProvider as NativeProvider } from '@geenius/ui/react-native'
import { Button as SolidButton, Dialog as SolidDialog, UIShowcasePage as SolidShowcasePage } from '@geenius/ui/solidjs'
import { Button as SolidArkButton, Dialog as SolidArkDialog, UIProvider as SolidArkProvider } from '@geenius/ui/solidjs-ark'
import { Button as SolidKobalteButton, Dialog as SolidKobalteDialog, UIProvider as SolidKobalteProvider } from '@geenius/ui/solidjs-kobalte'
import { Button as SolidUiButton, Dialog as SolidUiDialog, UIProvider as SolidUiProvider } from '@geenius/ui/solidjs-solidui'
import { Button as SolidCssButton } from '@geenius/ui/solidjs-css'
import { getUiContract, mutation, query } from '@geenius/ui/convex'

Usage

React Tailwind

import { Button, Dialog, DialogContent, DialogTrigger, UIShowcasePage } from '@geenius/ui/react'

export function Example(): JSX.Element {
  return (
    <>
      <Dialog>
        <DialogTrigger>
          <Button>Open dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>

      <UIShowcasePage />
    </>
  )
}

React shadcn

This variant expects Tailwind CSS 4 in the consuming app and the published stylesheet imported once.

import '@geenius/ui/react-shadcn/styles.css'
import { Button, Dialog, DialogContent, DialogTrigger, UIShowcasePage } from '@geenius/ui/react-shadcn'

export function Example(): JSX.Element {
  return (
    <>
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="default">Open shadcn dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>

      <UIShowcasePage />
    </>
  )
}

React CSS

import { Button, UITokensPage } from '@geenius/ui/react-css'

export function Example(): JSX.Element {
  return (
    <>
      <Button variant="primary">Vanilla CSS</Button>
      <UITokensPage />
    </>
  )
}

React daisyUI

import '@geenius/ui/react-daisyui/styles.css'
import { Button, UIProvider, UITokensPage } from '@geenius/ui/react-daisyui'

export function Example(): JSX.Element {
  return (
    <UIProvider appearance="light" hasBackground>
      <Button variant="primary">daisyUI</Button>
      <UITokensPage />
    </UIProvider>
  )
}

Enable the official daisyui Tailwind plugin in the consuming app stylesheet:

@import "tailwindcss";
@plugin "daisyui";

React Ant Design

import { Button, Dialog, DialogContent, DialogTrigger, UIProvider } from '@geenius/ui/react-ant'

export function Example(): JSX.Element {
  return (
    <UIProvider>
      <Dialog>
        <DialogTrigger>
          <Button>Open Ant dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>
    </UIProvider>
  )
}

React Chakra

import { Button, Dialog, DialogContent, DialogTrigger, UIProvider } from '@geenius/ui/react-chakra'

export function Example(): JSX.Element {
  return (
    <UIProvider>
      <Dialog>
        <DialogTrigger>
          <Button>Open dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>
    </UIProvider>
  )
}

React Mantine

import { Button, Dialog, DialogContent, DialogTrigger, UIProvider } from '@geenius/ui/react-mantine'

export function Example(): JSX.Element {
  return (
    <UIProvider>
      <Dialog>
        <DialogTrigger>
          <Button>Open Mantine dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>
    </UIProvider>
  )
}

React MUI

import { Button, UIProvider, UIShowcasePage, UITokensPage } from '@geenius/ui/react-mui'

export function Example(): JSX.Element {
  return (
    <UIProvider appearance="light" hasBackground>
      <Button variant="primary">Material UI</Button>
      <UIShowcasePage />
      <UITokensPage />
    </UIProvider>
  )
}

React HeroUI

import { Button, UIProvider, UITokensPage } from '@geenius/ui/react-heroui'

export function Example(): JSX.Element {
  return (
    <UIProvider appearance="light" hasBackground>
      <Button variant="primary">HeroUI</Button>
      <UITokensPage />
    </UIProvider>
  )
}

This variant expects Tailwind CSS v4 in the consuming app plus the HeroUI runtime stylesheet:

@import "tailwindcss";
@import "@heroui/styles";

SolidJS Tailwind

import { Button, Dialog, DialogContent, DialogTrigger, UIShowcasePage } from '@geenius/ui/solidjs'

export function Example() {
  return (
    <>
      <Dialog>
        <DialogTrigger>
          <Button>Open dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>

      <UIShowcasePage />
    </>
  )
}

SolidJS Ark UI

import { Button, Dialog, DialogContent, DialogTrigger, UIProvider, UIShowcasePage, UITokensPage } from '@geenius/ui/solidjs-ark'

export function Example() {
  return (
    <UIProvider appearance="light" hasBackground>
      <Dialog>
        <DialogTrigger>
          <Button>Open Ark dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>

      <UIShowcasePage />
      <UITokensPage />
    </UIProvider>
  )
}

SolidJS Kobalte

import { Button, Dialog, DialogContent, DialogTrigger, UIProvider, UIShowcasePage } from '@geenius/ui/solidjs-kobalte'

export function Example() {
  return (
    <UIProvider appearance="light" hasBackground>
      <Dialog>
        <DialogTrigger>
          <Button>Open Kobalte dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>

      <UIShowcasePage />
    </UIProvider>
  )
}

SolidJS Solid UI

import { Button, Dialog, DialogContent, DialogTrigger, UIProvider, UIShowcasePage, UITokensPage } from '@geenius/ui/solidjs-solidui'

export function Example() {
  return (
    <UIProvider appearance="light" hasBackground>
      <Dialog>
        <DialogTrigger>
          <Button>Open Solid UI dialog</Button>
        </DialogTrigger>
        <DialogContent>Ready to ship.</DialogContent>
      </Dialog>

      <UIShowcasePage />
      <UITokensPage />
    </UIProvider>
  )
}

SolidJS CSS

import { Button, UITokensPage } from '@geenius/ui/solidjs-css'

export function Example() {
  return (
    <>
      <Button variant="primary">Vanilla CSS</Button>
      <UITokensPage />
    </>
  )
}

Storybook apps

Local Storybook shells are included for every launch UI variant. The root scripts are generated through variants.json:

pnpm storybook:react
pnpm storybook:react-css
pnpm storybook:react-native
pnpm storybook:solidjs

Production builds are available through:

pnpm test:storybook:build
pnpm test:storybook

apps/storybook-surface.ts is the shared catalog. __tests__/storybook-parity.test.ts verifies that each app registry exposes the same story IDs.

Convex

@geenius/ui/convex currently exposes a lightweight typed metadata contract rather than persisted package-owned tables.

import { getUiContract, getUiRuntimeContract } from '@geenius/ui/convex'

Development

pnpm build
pnpm lint
pnpm lint:apps
pnpm type-check
pnpm test
pnpm test:gauntlet
pnpm test:all

Contributing tests

variants.json is the single source of truth for the UI axis. Add or update a variant there first, then add the variant package, Storybook app, and e2e harness support that the helper scripts derive from that entry.

The core gauntlet scripts are:

• pnpm lint, pnpm lint:apps, pnpm lint:pub
• pnpm type-check
• pnpm test:unit, pnpm test:exports, pnpm test:types
• pnpm test:storybook:build, pnpm test:storybook
• pnpm test:e2e, pnpm test:a11y, pnpm test:visual, pnpm test:perf
• pnpm test:coverage, pnpm test:mutation, pnpm size
• pnpm audit:supply-chain, pnpm test:license, pnpm sbom

Visual regression is default-on. Use PW_VISUAL=0 pnpm test:visual only for local fast iteration, and update baselines intentionally with pnpm test:visual --update-snapshots.

License

FSL-1.1-Apache-2.0.