@suwa-sh/mui-fui-theme

Futuristic User Interface (FUI/HUD) theme for MUI.

Features

• Dark and Light mode themes
• FUI/HUD-style MUI components
• CSS animations (scan lines, glow effects, etc.)
• React hooks for text decode and scroll animations

Requirements

• React 18.0+ or 19.0+
• MUI (Material UI) 7.0+
• Emotion 11.0+

Installation

npm install @suwa-sh/mui-fui-theme @mui/material @emotion/react @emotion/styled
# or
pnpm add @suwa-sh/mui-fui-theme @mui/material @emotion/react @emotion/styled

Quick Start

import { ThemeProvider, CssBaseline } from '@mui/material';
import { createFuiTheme } from '@suwa-sh/mui-fui-theme';

const theme = createFuiTheme('dark'); // or 'light'

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <YourApp />
    </ThemeProvider>
  );
}

Components

Atoms (MUI Themed)

FUI-styled MUI components:

• Button, IconButton
• TextField, Select, Checkbox, Radio, Switch, Slider
• Alert, Chip, Dialog, Skeleton
• DatePicker (optional, requires @mui/x-date-pickers)
• Navigation (Tabs, Breadcrumbs, ToggleButton)
• Surfaces (Paper, Card, Accordion)

Molecules (Custom)

Custom FUI components:

• NavMenuItem - Navigation menu item with stage colors
• ProgressBar - Animated progress bar
• ColorLegend - Color legend display
• StatusIndicator - Status indicator with colors
• SectionHeader - Section header with decorations
• DiamondNode - Diamond-shaped node
• IconBox - Icon container with FUI styling
• AwakeningCard - Card with "Silence to Awakening" hover effect

Animations

Available CSS keyframe animations:

• fadeInUp, fadeInLeft, fadeInRight, slideInDiagonal
• scaleIn, rotateIn
• pulse, glowPulse
• float, hologramFlicker
• scanLine, dataStream, gridPulse

Hooks

• useTextDecode - Matrix/JARVIS-style text scramble effect
• useScrollAnimation - Scroll-triggered animations
• useAwakeningStyle - "Silence to Awakening" hover effect for dashboard cards

Design Tokens

This package includes design tokens in Figma Tokens (Tokens Studio) format as the Single Source of Truth.

Token Files

tokens/
├── core.json      # Typography, spacing, layout (shared)
├── dark.json      # Dark mode colors and effects
└── light.json     # Light mode colors and effects

Direct Import

// Import tokens directly
import coreTokens from '@suwa-sh/mui-fui-theme/tokens/core.json';
import darkTokens from '@suwa-sh/mui-fui-theme/tokens/dark.json';
import lightTokens from '@suwa-sh/mui-fui-theme/tokens/light.json';

// Or via the main export
import { coreTokens, darkTokens, lightTokens } from '@suwa-sh/mui-fui-theme';

Figma Tokens Studio Integration

1. Install Tokens Studio for Figma
2. Import tokens/*.json files as Token Sets
3. Sync design changes back to JSON

Token Format

Tokens follow the Figma Tokens format:

{
  "colors": {
    "primary": { "value": "#FFB300", "type": "color" }
  }
}

Documentation

• Storybook - Interactive component demos
• agent docs - Document for LLM / Coding Agent

Pro Version

Need more components? Check out mui-fui-theme-pro.

License

MIT