@aicujp/ui

Liquid Glass UI components for React — by AICU Inc.

Apple Liquid Glass デザイン言語にインスパイアされた、ガラス質感のUIコンポーネントライブラリ。

Install

npm install @aicujp/ui
# or
pnpm add @aicujp/ui

Peer Dependencies:

npm install react react-dom tailwindcss lucide-react

Quick Start

import { LiquidGlassNav } from "@aicujp/ui";
import { Calendar, Search, User } from "lucide-react";

export default function App() {
  return (
    <LiquidGlassNav
      items={[
        { id: "events", label: "Events", icon: Calendar },
        { id: "search", label: "Search", icon: Search },
        { id: "profile", label: "Profile", icon: User },
      ]}
      theme="dark"
      position="bottom"
      onSelect={(id) => console.log(id)}
    />
  );
}

Tailwind Config

Add @aicujp/ui to your content paths:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@aicujp/ui/dist/**/*.{js,mjs}",
  ],
};

Components

<LiquidGlassNav />

Floating pill-shaped navigation bar with glass morphism.

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | NavItem[] | required | Navigation items | | activeId | string | first item | Active item ID | | onSelect | (id: string) => void | — | Selection callback | | position | "bottom" \| "left" | "bottom" | Nav position | | theme | "dark" \| "light" | "dark" | Color theme | | showLabels | boolean | true | Show text labels (bottom only) | | className | string | — | Additional CSS classes |

interface NavItem {
  id: string;
  label: string;
  icon: LucideIcon | React.FC<{ size?: number }>;
}

Design Tokens

The library uses CSS custom properties for theming:

/* Dark (default) */
--glass-bg: rgba(22, 22, 23, 0.72);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-highlight: rgba(255, 255, 255, 0.09);

/* Light */
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(0, 0, 0, 0.06);
--glass-highlight: rgba(0, 0, 0, 0.06);

License

MIT © AICU Inc.

GitHub: github.com/aicuai/ui