README.md

July 6, 2026 · View on GitHub

Hikari

The Frontend of Everything

Website | Quick Start | Examples | Architecture

A modern Rust UI framework blending traditional Chinese aesthetics with futuristic sci-fi design

Hikari (光 - "Light") is a comprehensive UI framework built with Dioxus, featuring a unique design system inspired by Arknights' clean aesthetics, FUI (Futuristic User Interface) elements, and a rich palette of traditional Chinese colors. The name "Hikari" comes from the rhythm game Arcaea.

Vision

Hikari embodies three core design philosophies:

Arknights Flat Design - Clean lines, clear information hierarchy, high contrast, and refined simplicity
FUI Sci-Fi Aesthetics - Subtle glow effects, dynamic indicators, precise borders, and geometric patterns
Chinese Traditional Colors - 500+ authentic historical colors for cultural depth and visual richness

The result is a UI framework that feels both ancient and futuristic, professional yet approachable, with a distinctive visual identity that stands out from conventional component libraries.

Tech Stack

Frontend: Dioxus 0.7 (WebAssembly)
Styling: Grass (SCSS compiler) + SCSS
Server: Axum 0.8 (optional SSR support)
Language: Rust 1.52+
Build System: Justfile
Tooling: Python 3.11+ (formatting and linting)

Features

hikari-palette

500+ traditional Chinese colors
Rich color metadata (hex, RGB, CMYK, historical notes)
Pre-defined palettes for different design systems
Type-safe color constants with Chinese names

hikari-theme

Theme context and provider
CSS variables system
Multiple built-in themes (Primary, FUI Dark, Arknights, Fresh)
SCSS mixins and utilities
Responsive design utilities

hikari-components

Layout System: Layout, Header, Aside, Content, Container, Grid, Row, Col, Section, Spacer
Basic Components: Button, Input, Card, Badge
Feedback: Alert, Toast, Tooltip
Navigation: Menu, Tabs, Breadcrumb
Data Display: Table (modular with pagination, sort, filter, selection)
Data Display: Tree (modular with virtual scroll, drag-drop, collapse)

hikari-extra-components

Node Graph System: Canvas, nodes, ports, connections, minimap, context menu
Advanced Utilities: Collapsible, DragLayer, ZoomControls
Perfect for visual editors, workflow builders, and data visualization

hikari-render-service

Server-Side Rendering support
Easy Axum integration
Static asset serving
Type-safe router builder
Production-ready error handling
Style service with CSS injection

Quick Start

Installation

Add Hikari to your Cargo.toml:

[dependencies]
hikari-palette = "0.1.0"
hikari-theme = "0.1.0"
hikari-components = "0.1.0"

Basic Usage

use dioxus::prelude::*;
use hikari_theme::ThemeProvider;
use hikari_components::Button;

fn app() -> Element {
    rsx! {
        ThemeProvider { palette: "arknights".to_string(),
            div { class: "container",
                h1 { "Welcome to Hikari" }
                p { "A fusion of tradition and technology" }

                Button {
                    variant: ButtonVariant::Primary,
                    onclick: |_| println!("Clicked!"),
                    "Get Started"
                }
            }
        }
    }
}

With Chinese Colors

use hikari_palette::{石青, 朱砂, 藤黄};

fn customize_theme() {
    let primary = 石青;
    let secondary = 朱砂;
    let accent = 藤黄;

    println!("Primary: {} ({})", primary.name, primary.hex);
    // Output: Primary: 石青 (#1759A8)
}

Package Structure

hikari/
├── packages/
│   ├── hikari-palette/          # Chinese color system
│   ├── hikari-theme/            # Theme system + SCSS
│   ├── hikari-components/       # Basic components
│   ├── hikari-extra-components/ # Advanced components
│   └── hikari-render-service/   # SSR + style service
│
├── examples/
│   ├── website/                 # Comprehensive website
│   ├── table-demo/              # Table component demo
│   ├── tree-demo/               # Tree component demo
│   ├── node-graph-demo/         # Node graph demo
│   └── ssr-demo/                # SSR example
│
├── docs/
│   ├── en-US/
│   │   ├── guides/
│   │   ├── design/
│   │   ├── components/
│   │   └── system/
│   └── zh-CHS/                  # Other locales follow the same layout
│
├── Cargo.toml                   # Workspace configuration
├── PLAN.md                      # Implementation plan
└── README.md                    # This file

Examples

Layout Component

use hikari_components::layout::{Layout, Header, Aside};

rsx! {
    Layout {
        header: rsx! {
            Header {
                h1 { "My Application" }
            }
        },
        aside: rsx! {
            Aside {
                nav {
                    a { "Home" }
                    a { "About" }
                    a { "Contact" }
                }
            }
        },
        main {
            p { "Main content goes here..." }
        }
    }
}

Button Component

rsx! {
    Button {
        variant: ButtonVariant::Primary,
        size: ButtonSize::Large,
        onclick: |_| println!("Clicked!"),
        "Click Me"
    }

    Button {
        variant: ButtonVariant::Ghost,
        icon: rsx! { Icon { name: "search" } },
        "Search"
    }

    Button {
        variant: ButtonVariant::Danger,
        loading: true,
        "Processing..."
    }
}

Theme Provider

rsx! {
    ThemeProvider {
        palette: "fui-dark".to_string(),
        // All components automatically use the FUI Dark theme
        Button { "FUI Button" }
    }
}

SSR Integration

use hikari_render_service::HikariRenderServicePlugin;

#[tokio::main]
async fn main() -> anyhow::Result<()> {
    let app = HikariRenderServicePlugin::new()
        .add_route("/api/health", health_handler)
        .static_assets("./dist")
        .build()?;

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await?;
    axum::serve(listener, app).await?;
    Ok(())
}

Design Philosophy

Arknights Flat Design

Clean, sharp lines and edges
Clear information hierarchy
High contrast for readability
Minimalist without being boring

FUI Sci-Fi Aesthetics

Subtle glow effects (box-shadow, text-shadow)
Dynamic indicators (breathing lights, pulse animations)
Fine 1px semi-transparent borders
Geometric patterns (hexagons, grids)

Animation Principles

Subtle transitions (150ms ease)
Functional animations over decorative
Smooth, natural motion curves
No jarring or distracting effects

Chinese Color System

Primary Colors: Stone Cyan (石青), Cinnabar (朱砂), Vine Yellow (藤黄), Indigo (靛蓝)
Neutral Colors: Moon White (月白), Ink Black (墨色), Silk Gray (缟色)
Functional Colors: Scallion Green (葱倩 - success), Goosling Yellow (鹅黄 - warning), Cinnabar (朱砂 - danger)

Each color carries historical significance, adding cultural depth to your applications.

Development

Prerequisites

Rust 1.52+
Python 3.11+ (for tooling scripts)
Just (command runner)

Build Commands

# Install just
cargo install just

# Build all packages
just build

# Run tests
just test

# Format code
just fmt

# Run linter
just lint

# Start development server
just dev

Package Status

hikari-palette - Complete
hikari-theme - Complete
hikari-components - Basic components complete
hikari-extra-components - In progress
hikari-render-service - Core features complete

See PLAN.md for detailed implementation status.

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Documentation

License

Hikari is dual-licensed under:

MIT License (LICENSE-MIT or https://opensource.org/licenses/MIT)
Apache License, Version 2.0 (LICENSE-APACHE or https://www.apache.org/licenses/LICENSE-2.0)

You may choose either license for your use.

Acknowledgments

Inspired by and built upon:

Dioxus - The Rust UI framework
Arknights - Design language inspiration
ChineseColors - Traditional color palette
tairitsu - Architecture patterns
akasha - Node graph system reference

Name

"Hikari" (光) means "light" in Japanese, representing:

Illumination through knowledge and culture
The fusion of tradition (ancient wisdom) and technology (future innovation)
Bringing clarity and beauty to user interfaces

Let Hikari illuminate your applications with the perfect blend of tradition and technology.