A modern UI component library blending traditional Chinese aesthetics with futuristic sci-fi design

Hikari (光 - "Light") is a component library built on the tairitsu framework (tairitsu-vdom, tairitsu-hooks, tairitsu-macros, tairitsu-style ^0.5.18), sharing SCSS styles across a Rust/WASM implementation and a Vue 3 port. The design system draws from 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.

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.

The Rust crates are published to crates.io (current 0.3.x) with docs on docs.rs.

• Framework: tairitsu — tairitsu-vdom/hooks/macros/style ^0.5.18 (compiles to wasm32 / WASI)
• Styling: SCSS compiled via grass + scss! compile-time stylesheets
• Server: Axum 0.8 (optional SSR support)
• Language: Rust 1.85 (edition 2024)
• Web port: Vue 3 (TypeScript, packages/vue, npm package @celestia-island/hikari)
• Build System: Justfile

Add the crates to your Cargo.toml:

[dependencies]
tairitsu-vdom = "^0.5.18"
tairitsu-hooks = "^0.5.18"
tairitsu-macros = "^0.5.18"
hikari-palette = "^0.3"
hikari-theme = "^0.3"
hikari-animation = "^0.3"
hikari-icons = "^0.3"
hikari-i18n = "^0.3"
hikari-components = { version = "^0.3", features = ["basic", "feedback", "navigation", "layout", "data"] }

or with cargo add:

cargo add tairitsu-vdom@^0.5.18 tairitsu-hooks@^0.5.18 tairitsu-macros@^0.5.18
cargo add hikari-palette@^0.3 hikari-theme@^0.3 hikari-animation@^0.3 hikari-icons@^0.3 hikari-i18n@^0.3
cargo add hikari-components@^0.3

Component features are organized in groups — basic, feedback, navigation, layout, data, display, entry, production — each enabling a set of individual component features (e.g. button, table, tree, toast). The default feature set covers all groups.

Basic usage:

use tairitsu_macros::{component, rsx};
use tairitsu_vdom::VNode;
use hikari_theme::ThemeProvider;
use hikari_components::*;

#[component]
fn App() -> VNode {
    rsx! {
        ThemeProvider { initial_palette: "hikari".to_string(),
            div { class: "container",
                Button { variant: ButtonVariant::Primary, "Get Started" }
            }
        }
    }
}

Note: hikari-components and the tairitsu crates are published on crates.io. Local development can point the tairitsu crates at working copies via [patch.crates-io] in ~/.cargo/config.toml.

The Vue port ships as @celestia-island/hikari (packages/vue), published to the npm registry as a source distribution: the package contains the TypeScript and SCSS sources, and consumer build pipelines (Vite + vue-tsc + sass) compile them like first-party code — no build step happens on publish. Depend on it from the registry:

// package.json
{
  "dependencies": {
    "@celestia-island/hikari": "^*"
  }
}

The package exposes these subpaths:

Import the styles once in your app entry point (or the granular styles/* subpaths if you assemble your own bundle), then use the Hk* components (HkButton, HkCard, HkInput, HkModal, ...) in your templates:

import "@celestia-island/hikari/styles";

For local development against an upstream working copy, use celestia-devtools link-npm-siblings — it overlays node_modules with symlinks to sibling checkouts (tracked in node_modules/.celestia-linked-siblings.json, revert with --remove). No link: dependencies, no workspace-member manifests, and CI/production always resolve the pure registry package.

Components consume the theme through CSS variables (--color-*, --hi-*). Call initTheme() once at app startup to inject the active preset (the single default preset — pink/paper in light mode, black-blue in dark) with light/dark mode and custom-theme support:

import { initTheme } from "@celestia-island/hikari";

initTheme();

Components render correctly even without initTheme() — packages/vue/src/tokens.scss ships a static default light theme, and initTheme() overrides it at runtime via inline styles. For runtime theme/mode switching (e.g. a HkThemeToggle), use useTheme():

import { useTheme } from "@celestia-island/hikari";

const { currentTheme, currentMode, setTheme, setMode, toggleMode } = useTheme();

The full documentation lives under docs/ in 9 languages:

• English · 简体中文 · 繁體中文 · 日本語 · 한국어
• Español · Français · Русский · العربية

Live component pages from the docs (rendered by the hikari components themselves):

Key pages:

• Architecture Overview
• Contributing Guidelines
• Design Overview
• System Overview

Package-level docs:

• hikari-palette
• hikari-theme
• hikari-animation
• hikari-components
• hikari-icons
• hikari-vue (@celestia-island/hikari)

• Rust 1.85+ (edition 2024)
• just (command runner) — cargo install just
• Node.js + pnpm (for the Vue port)

# Build all packages (release)
just build

# Build for development
just build-dev

# Run tests
just test

# Format code
just fmt

# Run clippy lints
just clippy

# Start the development server
just dev

We welcome contributions! Please see the Contributing guide for guidelines.

Hikari is licensed under the Synthetic Source License (SySL), Version 1.0.

Inspired by and built upon:

• Tairitsu - The full-stack framework Hikari is built on
• Arknights - Design language inspiration
• ChineseColors - Traditional color palette
• akasha - Node graph system reference

"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.