Introduction

Native components, open source, built on GPUix.

GPUIxUI is a component library for desktop software built with GPUix and React. Every component renders through GPUix's native primitives: there is no DOM, CSS or browser runtime inside the library.

It is built around five principles:

• Native by construction — components are GPUix host elements, not HTML painted to look like a desktop app.
• Composition — every component exposes named parts with one predictable contract.
• Semantic tokens — colour, type, spacing, radius, elevation and density come from the theme; no component carries a colour literal.
• Honest limits — where GPUix 0.10.0 lacks a capability, the docs say so and give the strongest working alternative.
• Open code — the implementation is in the workspace, typed and readable.

Native by constructionCopy Anchor Link

The published @gpuix/react 0.10.0 exposes a small set of host elements — div, text, img, svg, canvas, input, textarea, anchored, code, diff, markdown and virtual-list. GPUIxUI builds its components from those, so a button is a div with the button role and its own Enter/Space contract, and a dialog is an anchored veil over the window. The docs record those decisions instead of hiding them.

CompositionCopy Anchor Link

Components are compound: a trigger, a surface and the parts inside it. The parts validate their placement, so a DialogTitle outside a DialogHeader fails with a message naming the family. The same shape repeats across the library, which makes a new component predictable for both people and models.

<Dialog>
  <DialogTrigger>Rename project</DialogTrigger>
  <DialogContent label="Rename project">
    <DialogHeader>
      <DialogTitle>Rename project</DialogTitle>
      <DialogDescription>Used everywhere the project is named.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose variant="ghost">Cancel</DialogClose>
      <DialogClose variant="primary">Save</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>;

Semantic tokensCopy Anchor Link

A theme is plain data. ThemeProvider puts a resolved theme in React context, and each component reads the role it needs — colors.primary, spacing.md, radius.md — instead of a literal. Light, dark and high-contrast themes are the same shape, so a brand theme overrides only what it changes.

import { Badge } from "@gpuixui/components/badge";
import { lightTheme } from "@gpuixui/tokens";
import { ThemeProvider } from "@gpuixui/tokens/react";

<ThemeProvider theme={lightTheme}>
  <Badge tone="success">Connected</Badge>
</ThemeProvider>;

Start hereCopy Anchor Link