Cubes UI

Modern, reusable, and developer-friendly UI components powered by Tailwind CSS — perfect for building scalable design systems and accelerating development.

read documentation

🚀 Installation

npm install cubes-ui

⚙️ Setup

npx cubes-ui-init

This command will:

• Install required Tailwind packages
• Configure Vite with Tailwind plugin
• Update your CSS with:

@import "tailwindcss";
@import "cubes-ui/index.css";
@source "../node_modules/cubes-ui/dist/index.css";

🧪 Usage

import { Button } from "cubes-ui";

export default function Example() {
  return <Button variant="default" size="lg">Click me</Button>;
}

🔔 Toast System (powered by Sonner)

Cubes UI uses Sonner for elegant toast notifications:

import { toast } from "cubes-ui";

toast.success("Saved!");
toast.error("Oops...");
toast.custom(<div>Custom JSX</div>);

• Multiple positions (top-left, bottom-center, etc.)
• Pause on hover
• Light/Dark theme support
• Dynamic content
• Full control via options:

toast.success("Updated!", { position: "top-center" });

🔌 Integrations

TanStack Query

import { Spinner, useQuery } from "cubes-ui";
const { data, isLoading } = useQuery({ endpoint: "users" });

React Hook Form

import { Input, Button, useForm } from "cubes-ui";

Zod Validation

import { Validator, Input, FormError, useForm } from "cubes-ui";

🧱 Built-in Hooks

Cubes UI provides fully-typed and scalable hooks:

🔩 Core Utilities

| Hook | Description | |--------------------|------------------------------------------------------------| | useDebounce | Debounces value or function | | useThrottle | Throttles updates | | useClickOutside | Detects outside clicks | | useMediaQuery | Tracks screen breakpoints | | useLocalStorage | LocalStorage abstraction | | useSessionStorage| SessionStorage abstraction | | useIndexedDB | Async IndexedDB state | | useCacheStorage | Caches API responses locally |

🌐 API & Request Hooks

| Hook | Description | |---------------|--------------------------------------------------------------------------| | useRequest | Unified fetch via TanStack Query | | useMutation | Typed mutations with endpoint/token | | useQuery | Enhanced query with loader and endpoint |

⚡️ Realtime & WebSocket Hooks

| Hook | Description | |--------------|--------------------------------------------------------------------------| | useSocket | WebSocket integration with token and reconnect support |

🎭 UI/UX Hooks

| Hook | Description | |--------------------|---------------------------------------------------------| | useLazyTransition| Improved transitions via useTransition wrapper | | useIsFirstRender | Detect initial render | | useHoverIntent | Intent-based hover detection | | useMountEffect | Run effect only once on mount |

🧪 Developer Experience

| Hook | Description | |-------------------|--------------------------------------------------------------| | useTraceRender | Logs re-renders for performance insights |

⚙️ Context with CubesProvider

<CubesProvider
  apiUrl="https://api.example.com"
  getToken={() => localStorage.getItem("token")}
  onUnauthorized={() => redirectTo("/login")}
>
  <App />
</CubesProvider>

Hooks like useRequest and useSocket automatically access this context.

🧠 Tips & Tricks

• Tailwind-safe imports using @source
• Custom themes via @layer
• Dark mode support out-of-the-box

🔗 Resources

• 📖 Docs
• 📦 npm
• 🧪 Demo
• 📊 Bundle

❤️ Built for developers who love clean UI

Cubes UI helps you move faster with consistent design, powerful hooks, and blazing-fast integration.
Built with love and Tailwind.