Fluixi UI
GitHub ↗

Introduction

Fluixi UI is a headless, accessible, internationalised component library for the Fluixi framework. It ships 88 packages — dialogs, menus, comboboxes, calendars, date & time pickers, data tables and more — each following WAI-ARIA patterns with full keyboard support and zero visual opinion.

Principles

  • Accessible by default. Roles, focus management and keyboard interaction are built in, not bolted on.
  • Headless & themeable. Components ship unstyled; bring your own CSS, or opt into the @fluixi-ui/tokens preset skin.
  • Internationalised. Locale-aware calendars, date/time fields and formatting, built on @internationalized/date.
  • Fine-grained. Built on Fluixi's compiler and signals — surgical DOM updates, no virtual DOM.

Installation

Packages are published to GitHub Packages under the @fluixi scope. Point the scope at the registry in your .npmrc:

@fluixi:registry=https://npm.pkg.github.com/

Then install what you need:

pnpm add @fluixi-ui/dialog @fluixi-ui/date-picker @fluixi-ui/tokens

Quick example

import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@fluixi-ui/dialog';

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogTitle>Hello</DialogTitle>
    <p>A fully accessible, headless dialog.</p>
  </DialogContent>
</Dialog>

Styling

Every component takes an fx prop for per-instance styling — token-aware, responsive, and state-aware without a stylesheet:

<DialogContent fx={{ p: 5, maxWidth: { base: '90vw', md: 480 }, radius: 'lg' }} />

See styling for the full channel, and theming for the colour scheme, accent and design-language axes underneath it.

Browse the sidebar for every component's API, parts and keyboard reference.