Package Exports

@geenius/ui
@geenius/ui/convex
@geenius/ui/react
@geenius/ui/react-ant
@geenius/ui/react-chakra
@geenius/ui/react-css
@geenius/ui/react-css/styles
@geenius/ui/react-css/styles.css
@geenius/ui/react-daisyui
@geenius/ui/react-daisyui/styles
@geenius/ui/react-daisyui/styles.css
@geenius/ui/react-heroui
@geenius/ui/react-mantine
@geenius/ui/react-mui
@geenius/ui/react-native
@geenius/ui/react-native/components
@geenius/ui/react-native/index
@geenius/ui/react-native/primitives
@geenius/ui/react-native/provider
@geenius/ui/react-native/theme
@geenius/ui/react-shadcn
@geenius/ui/react-shadcn/styles
@geenius/ui/react-shadcn/styles.css
@geenius/ui/shared
@geenius/ui/solidjs
@geenius/ui/solidjs-ark
@geenius/ui/solidjs-css
@geenius/ui/solidjs-css/styles
@geenius/ui/solidjs-css/styles.css
@geenius/ui/solidjs-kobalte
@geenius/ui/solidjs-solidui

Readme

@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 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 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 the base React, dedicated React Ant, and SolidJS variants:

pnpm --filter ./apps/storybook-react dev
pnpm --filter ./apps/storybook-react-ant dev
pnpm --filter ./apps/storybook-solidjs dev

Production builds are available through:

pnpm --filter ./apps/storybook-react build
pnpm --filter ./apps/storybook-react-ant build
pnpm --filter ./apps/storybook-solidjs build

These shells cover the Tailwind React surface, the Ant-backed React surface, and the SolidJS parity surface for visual review. Library-backed variants such as @geenius/ui/react-mui, @geenius/ui/solidjs-ark, @geenius/ui/solidjs-kobalte, and @geenius/ui/solidjs-solidui use UIShowcasePage and UITokensPage for package-level visual review coverage.

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 test
pnpm --filter ./apps/storybook-react build
pnpm --filter ./apps/storybook-react-ant build
pnpm --filter ./apps/storybook-solidjs build

License

FSL-1.1-Apache-2.0.