UFO UI

UFO UI is a React UI component library implementing Material Design 3. It focuses on simplicity, low dependency count, and small bundle size.

The library is designed to be used as a single import, without additional required packages beyond React.

Goals

• Full Material Design 3 implementation
• Minimal bundle size
• No heavy runtime dependencies
• Suitable for both open-source and commercial products

Status

This project is currently in early development (v0.x). The API may change.

Live preview

UFO UI Playground (preview):
https://ufoui.kgnet.eu

Installation

pnpm add @ufoui/core

Usage

Import the global styles once, in a single controlled place at your application entry point (e.g. main.tsx, or app/layout.tsx / pages/_app.tsx in Next.js). The simplest path is the full stylesheet — reset plus components:

import '@ufoui/core/index.css';

For full control over the cascade, import the layers separately and keep your own CSS last, so your overrides win at equal specificity:

import '@ufoui/core/reset.css';   // global reset / base
import '@ufoui/core/styles.css';  // components + utilities (no reset)
import './app.css';               // your overrides — last

If your app already ships its own reset, skip ours and import only the components:

import '@ufoui/core/styles.css';
import './app.css';

Wrap your application with ThemeProvider and use components:

import { ThemeProvider, Button } from '@ufoui/core';

function App() {
  return (
    <ThemeProvider>
      <Button label="Save" filled />
    </ThemeProvider>
  );
}

ThemeProvider is responsible only for the dynamic layer — theme tokens, color schemes, and font registry generated at runtime. The static CSS (reset, components, utilities) is the explicit import above, so your app stays in control of the cascade order.

Theming

You can customize the theme by providing a seed color:

<ThemeProvider seedColor="#6750A4">
  <App />
</ThemeProvider>

License

Apache License 2.0

Trademark

“UFOUI” (UFO UI) and the UFOUI logo are trademarks of the UFOUI project. Use of the name or logo requires permission.