@geomak/ui · Oxygen Design System

60+ production-grade React components for enterprise apps — dashboards, CRMs, internal tools, and landing pages. Token-driven, accessible, light/dark first-class, and properly tree-shakeable.

▶ Browse the live, interactive demo →

Built on React 19, Radix UI (accessibility + behaviour), Tailwind CSS, and Framer Motion. Ships as ESM + CJS + TypeScript declarations, with a CSS-variable token layer you can re-theme at runtime.

Why oxygen-ui

• Token-driven, dark mode first-class. Every colour, radius, shadow, and motion value is a CSS variable. Light and dark aren't an afterthought — both are designed. Re-theme the whole system with one override.
• Accessible by default. Behaviour comes from Radix (focus traps, keyboard nav, ARIA); icons are aria-hidden, controls are labelled.
• Genuinely tree-shakeable. Import one icon and ship 0.45 KB (not the whole set). The entire library is ~76 KB gzipped with deps external — and a CI guard keeps it from regressing.
• Strict and tested. strict TypeScript, ESLint at zero warnings, 360+ unit tests, per-export bundle budgets in CI.
• Batteries included. Not just buttons — a Scheduler, a real-time Chat (WebSocket-ready), Table with pagination, a Form engine, an e-commerce Cart, and a full Marketing kit (hero, pricing, testimonials, lead capture) to build the landing page too.

Quick start

npm install @geomak/ui      # peer deps: react@19, react-dom@19

import '@geomak/ui/styles'                       // 1. tokens + component styles, once at the root
import { ThemeProvider, Button, Badge } from '@geomak/ui'

export default function App() {
  return (
    <ThemeProvider>                              {/* 2. light/dark + token theming */}
      <Button content="Get started" />
      <Badge tone="accent">New</Badge>
    </ThemeProvider>
  )
}

Tree-shakeable icons live on their own subpath:

import { ChevronDown, Search, createIcon } from '@geomak/ui/icons'

Optional providers wrap only the features you use: NotificationProvider, TooltipProvider, CartProvider.

Components

60+ components across these groups — all with live controls and a written guide in Storybook.

| Group | Components | |---|---| | Layout | AppShell · Box · Flex · Grid · Portal · ScalableContainer | | Navigation | TopBar · Sidebar · Breadcrumbs · ContextMenu · MegaMenu · MenuButton | | Buttons | Button · IconButton · FAB | | Inputs | TextInput · NumberInput · Password · SearchInput · TextArea · Checkbox · Switch · RadioGroup · SegmentedControl · Dropdown · AutoComplete · TreeSelect · TagsInput · Slider · Rating · OtpInput · FileInput · ColorPicker · DatePicker · DateRangePicker · TimePicker | | Forms | Form (useForm) · CreditCardForm | | Data Display | Table · List · Tree · Tabs · Accordion · Card · CardCarousel · Statistic · Avatar · Badge · Kbd · Typography · Chat · Scheduler · Timeline · Stepper | | Feedback | Modal · Drawer · Tooltip · Notification · PopConfirm · Wizard · LogoutTimer | | Progress | LoadingSpinner · Skeleton | | E-Commerce | Cart · CartProvider / useCart · CartButton · EmptyCart · Checkout | | Marketing | Jumbotron · FeatureGrid · PricingPlans · Testimonials · SlideShow · Video · Parallax · Blog · Socials · CookieConsent · LeadCapture | | Icons | Icon.* namespace · @geomak/ui/icons (tree-shakeable) · createIcon | | Theming | ThemeProvider · ThemeSwitch | | Hooks | useForm · useJwt · useBreakpoint · useLocalStorage |

Design tokens

Every visual decision is a CSS variable (colour, radius, shadow, typography, density, motion, z-index). Tokens are also exported as JS for canvas / email / SSR:

import { vars, semanticTokens, palette } from '@geomak/ui/tokens'

<div style={{ background: vars.color.surface, borderRadius: vars.radius.lg }} />   // CSS-var refs (auto light/dark)
semanticTokens.dark.accent // resolved hex

Override globally, after importing the stylesheet:

:root { --color-accent: #7c3aed; }

See the Tokens, Palette, and Parameterization guides in Storybook.

Tailwind setup (optional)

The shipped @geomak/ui/styles already covers the components. This step is only needed if you want the same brand palette + token utilities in your own markup:

// tailwind.config.cjs
const { palette } = require('@geomak/ui/tokens')

module.exports = {
  content: ['./src/**/*.{ts,tsx}', './node_modules/@geomak/ui/dist/**/*.js'],
  darkMode: 'class',
  theme: { extend: { colors: palette } },
}

The standard gray / slate / zinc ramps and black stay available alongside the brand palette.

Package exports

| Import | What | |---|---| | @geomak/ui | All components, providers, hooks, the Icon namespace, cx | | @geomak/ui/icons | Tree-shakeable named icons + createIcon | | @geomak/ui/styles | Compiled CSS (tokens + components) | | @geomak/ui/tokens | palette, semanticTokens, vars as JS |

Development

yarn              # install
yarn storybook    # interactive catalog + guides
yarn build        # ESM + CJS + .d.ts + styles
yarn ci           # typecheck + lint + test + bundle-size guard
yarn size         # report per-export gzip sizes against budgets

Releases are automated with semantic-release + Conventional Commits: merging to main lints, type-checks, tests, publishes to npm, and deploys Storybook.

License

MIT © G-MAKROGLOU