@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