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-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 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

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 solid-js

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 SolidButton, Dialog as SolidDialog, UIShowcasePage as SolidShowcasePage } from '@geenius/ui/solidjs'
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

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>
  )
}

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 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 React variants such as @geenius/ui/react-mui 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.