OxideTerm UI

Modern, accessible UI component library extracted from OxideTerm - A production-grade React component collection designed specifically for Tauri applications.

✨ Features

🎨 17 Production-Ready Components - Built on battle-tested Radix UI primitives
🌗 Advanced Theme System - CSS variable-driven with full dark mode support
📐 Flexible UI Density - Compact, Comfortable, and Spacious modes for different use cases
🎭 Frosted Glass Effects - Both CSS backdrop-filter and native Tauri vibrancy support
⚡ Performance Optimized - React.memo, lazy loading, and minimal re-renders
🌍 Tailwind CSS 4 - Modern styling with @import syntax and CSS-first configuration
📦 Full TypeScript Support - Complete type definitions for all components
♿ Accessibility First - WCAG compliant with keyboard navigation and screen reader support
🎯 Zero Runtime CSS-in-JS - All styles compiled at build time for maximum performance

📦 Installation

npm install oxideterm-ui
# or
pnpm add oxideterm-ui
# or
yarn add oxideterm-ui

Peer Dependencies

npm install react@^19.0.0 react-dom@^19.0.0

🚀 Quick Start

1. Import Styles

Add the stylesheet to your app entry point:

// main.tsx or App.tsx
import 'oxideterm-ui/styles.css';

2. Use Components

import { Button, Dialog, DialogContent, DialogTrigger, DialogTitle } from 'oxideterm-ui';

function App() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="default">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle>Welcome to OxideTerm UI</DialogTitle>
        <p>A modern component library for Tauri applications.</p>
      </DialogContent>
    </Dialog>
  );
}

📚 Components

Form Components

Button

Versatile button component with multiple variants and sizes.

import { Button } from 'oxideterm-ui';

<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🔥</Button>

Input

Text input with full form integration.

import { Input, Label } from 'oxideterm-ui';

<div>
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Checkbox

Accessible checkbox with label support.

import { Checkbox, Label } from 'oxideterm-ui';

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

RadioGroup

Radio button group with keyboard navigation.

import { RadioGroup, RadioGroupItem, Label } from 'oxideterm-ui';

<RadioGroup defaultValue="option1">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="r1" />
    <Label htmlFor="r1">Option 1</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option2" id="r2" />
    <Label htmlFor="r2">Option 2</Label>
  </div>
</RadioGroup>

Select

Dropdown select with search and keyboard navigation.

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'oxideterm-ui';

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

Layout Components

Tabs

Tab navigation with keyboard support.

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'oxideterm-ui';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Dialog

Modal dialog with backdrop and focus trap.

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from 'oxideterm-ui';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description text</DialogDescription>
    </DialogHeader>
    {/* Dialog content */}
  </DialogContent>
</Dialog>

DropdownMenu

Dropdown menu with nested submenus.

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'oxideterm-ui';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

ContextMenu

Right-click context menu.

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from 'oxideterm-ui';

<ContextMenu>
  <ContextMenuTrigger>
    <div>Right click me</div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Feedback Components

Toast

Toast notifications with auto-dismiss.

import { Toaster, useToast } from 'oxideterm-ui';

function App() {
  const { toast } = useToast();

  return (
    <>
      <Button onClick={() => toast({ title: "Success!", description: "Operation completed" })}>
        Show Toast
      </Button>
      <Toaster />
    </>
  );
}

Progress

Progress bar with indeterminate state.

import { Progress } from 'oxideterm-ui';

<Progress value={60} />

Tooltip

Hover tooltip with delay.

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'oxideterm-ui';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>Tooltip content</TooltipContent>
  </Tooltip>
</TooltipProvider>

Special Components

Command

Command palette (⌘K) with fuzzy search.

import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from 'oxideterm-ui';

<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

FontSizeHUD

Font size adjustment overlay (used in OxideTerm for terminal font scaling).

import { FontSizeHUD } from 'oxideterm-ui';

<FontSizeHUD
  fontSize={14}
  onClose={() => {}}
/>

🎨 Theme System

OxideTerm UI uses CSS variables for comprehensive theming. All colors, spacing, and effects can be customized.

CSS Variables

Override these variables in your global CSS:

:root {
  /* Background colors */
  --theme-bg: #ffffff;
  --theme-bg-secondary: #f9fafb;
  --theme-bg-tertiary: #f3f4f6;

  /* Foreground colors */
  --theme-fg: #111827;
  --theme-fg-secondary: #6b7280;
  --theme-fg-tertiary: #9ca3af;

  /* Border colors */
  --theme-border: #e5e7eb;
  --theme-border-secondary: #d1d5db;

  /* Accent colors */
  --theme-accent: #3b82f6;
  --theme-accent-hover: #2563eb;
  --theme-accent-fg: #ffffff;

  /* Destructive colors */
  --theme-destructive: #ef4444;
  --theme-destructive-hover: #dc2626;
  --theme-destructive-fg: #ffffff;

  /* Muted colors */
  --theme-muted: #f3f4f6;
  --theme-muted-fg: #6b7280;

  /* Radius */
  --radius: 0.5rem;
}

/* Dark mode */
[data-theme="dark"] {
  --theme-bg: #111827;
  --theme-bg-secondary: #1f2937;
  --theme-bg-tertiary: #374151;
  --theme-fg: #f9fafb;
  --theme-fg-secondary: #d1d5db;
  --theme-fg-tertiary: #9ca3af;
  --theme-border: #374151;
  --theme-border-secondary: #4b5563;
}

UI Density

Control component spacing with data attributes:

// Compact mode - minimal spacing
<div data-density="compact">
  <Button>Compact Button</Button>
</div>

// Comfortable mode - default spacing
<div data-density="comfortable">
  <Button>Comfortable Button</Button>
</div>

// Spacious mode - generous spacing
<div data-density="spacious">
  <Button>Spacious Button</Button>
</div>

CSS variables affected:

--spacing-xs through --spacing-2xl
--font-size-xs through --font-size-2xl
Component padding and margins

Frosted Glass Effects

Enable beautiful frosted glass effects for modern UIs:

// CSS backdrop-filter (works everywhere)
<div data-frosted="css" className="bg-white/80">
  <p>Content with CSS blur</p>
</div>

// Native vibrancy (Tauri only, macOS/Windows)
<div data-frosted="native" className="bg-transparent">
  <p>Content with native blur</p>
</div>

For Tauri native vibrancy, configure your window:

// src-tauri/src/main.rs
use tauri::window::Effect;

tauri::Builder::default()
  .setup(|app| {
    let window = app.get_window("main").unwrap();
    window.set_effects(tauri::window::EffectsBuilder::new()
      .effect(Effect::HudWindow)
      .build())?;
    Ok(())
  })

Animation Control

Control animation speed globally or per-component:

// Disable all animations
<div data-animation="off">
  <Dialog>...</Dialog>
</div>

// Reduced motion (respects prefers-reduced-motion)
<div data-animation="reduced">
  <Dialog>...</Dialog>
</div>

// Normal speed (default)
<div data-animation="normal">
  <Dialog>...</Dialog>
</div>

// Fast animations
<div data-animation="fast">
  <Dialog>...</Dialog>
</div>

🔧 Tailwind Configuration

OxideTerm UI requires Tailwind CSS 4. Configure your project:

tailwind.config.js

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/oxideterm-ui/dist/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        'theme-bg': 'var(--theme-bg)',
        'theme-fg': 'var(--theme-fg)',
        'theme-border': 'var(--theme-border)',
        'theme-accent': 'var(--theme-accent)',
        'theme-destructive': 'var(--theme-destructive)',
        'theme-muted': 'var(--theme-muted)',
      },
      borderRadius: {
        'theme': 'var(--radius)',
      },
    },
  },
};

CSS Import

/* src/styles.css */
@import "tailwindcss";
@import "oxideterm-ui/styles.css";

🏗️ Architecture

OxideTerm UI is built with:

Radix UI - Unstyled, accessible component primitives
class-variance-authority - Type-safe variant management
tailwind-merge - Intelligent Tailwind class merging
cmdk - Command palette implementation
Lucide React - Beautiful icon library

All components are:

Fully typed with TypeScript
Accessible (ARIA compliant)
Keyboard navigable
Screen reader friendly
Themeable via CSS variables
Performance optimized with React.memo

📄 License

Apache License 2.0

Licensed under the Apache License, Version 2.0. You may use, distribute, and modify this software under the terms of the Apache 2.0 license.

See LICENSE.md for full details.

🙏 Credits

Extracted from OxideTerm - A modern, high-performance SSH terminal built with Tauri 2.0 and Rust.

Built with love using:

Radix UI - Unstyled, accessible components
cmdk - Command palette
Tailwind CSS - Utility-first CSS framework
Lucide React - Beautiful icon library
class-variance-authority - Variant management

🤝 Contributing

This library is extracted from OxideTerm. For bug reports and feature requests, please open an issue in the main OxideTerm repository.

📝 Changelog

0.1.0 (2026-03-03)

Initial release
17 production-ready components
Full TypeScript support
Tailwind CSS 4 integration
Theme system with CSS variables
UI density modes
Frosted glass effects
Animation controls

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
EXAMPLES.md		EXAMPLES.md
LICENSE.md		LICENSE.md
PROJECT_STATUS.md		PROJECT_STATUS.md
README.md		README.md
STRUCTURE.md		STRUCTURE.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tailwind.config.js		tailwind.config.js
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

OxideTerm UI

✨ Features

📦 Installation

Peer Dependencies

🚀 Quick Start

1. Import Styles

2. Use Components

📚 Components

Form Components

Button

Input

Checkbox

RadioGroup

Select

Layout Components

Tabs

Dialog

DropdownMenu

ContextMenu

Feedback Components

Toast

Progress

Tooltip

Special Components

Command

FontSizeHUD

🎨 Theme System

CSS Variables

UI Density

Frosted Glass Effects

Animation Control

🔧 Tailwind Configuration

tailwind.config.js

CSS Import

🏗️ Architecture

📄 License

🙏 Credits

🤝 Contributing

📝 Changelog

0.1.0 (2026-03-03)

About

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages