CyberBlox UI Kit

Production-ready component library built with Radix UI and Tailwind CSS, developed by Abhishek John Charan.

Live Preview: https://ui.cyberbloxai.in/

Components

CyberBlox UI includes a comprehensive set of production-ready components.

Core Components

• Button: Enhanced with modern variants including shiny, outline, and ghost.
• Input & Textarea: Polished fields with smooth transitions and rounded-lg styling.
• Badge: Status indicators with success, warning, info, and destructive variants.
• Card: Versatile containers with hover lift effects and rounded-xl corners.
• Checkbox & Switch: Accessible toggle components with fluid animations.
• Select & Popover: Modern dropdowns and floating panels with rounded-xl design.
• Dialog: Fully accessible modal system with smooth transitions.
• Tabs: Tabbed navigation with refined active states and shadows.

Advanced Components

• Accordion: Vertically stacked interactive headings.
• Alert & Alert Dialog: Important messages and confirmation modals.
• Avatar: Visual representation of users with fallback support.
• Carousel: Responsive image and content sliders.
• Chart: Data visualization components built on Recharts.
• Command: Fast, composable command menu/search.
• Form: Powerful form builder integrated with react-hook-form and zod.
• Navigation Menu: Complex header and side navigation patterns.
• Sidebar: Fully responsive and collapsible dashboard sidebar.
• Table: Data tables with support for headers, footers, and rows.
• Toast & Sonner: Action notifications and system alerts.

And many more...

Breadcrumb, Calendar, Collapsible, Context Menu, Drawer, Hover Card, Label, Menubar, Pagination, Progress, Scroll Area, Separator, Sheet, Skeleton, Slider, Tooltip.

Overview

CyberBlox UI Kit is a modular, themeable component library designed for building SaaS applications faster. It includes production-grade components for authentication flows, dashboards, notifications, error pages, and more.

Key Features

• Type-Safe: Full TypeScript support with proper generics and inference.
• Accessible: WCAG compliant with proper ARIA labels and keyboard navigation.
• Themeable: Easy customization using CSS variables and design tokens.
• Responsive: Mobile-first design that looks great on every screen.
• Modular: Tree-shakeable by default—import only what you need.

Installation

There are two ways to use CyberBlox UI:

1. shadcn-style (Recommended)

This copies the component source code directly into your project, allowing you to customize everything. It also handles dependencies and installs necessary npm packages automatically.

# 1. Initialize the project (creates components.json and lib/utils.ts)
npx @cyberbloxai/ui-kit init

# 2. Add components as needed
npx @cyberbloxai/ui-kit add button
npx @cyberbloxai/ui-kit add dialog
npx @cyberbloxai/ui-kit add alert-dialog # This will also add 'button' automatically!

# 3. Add all components at once
npx @cyberbloxai/ui-kit add all

What happens during init?

• A components.json file is created in your root directory.
• lib/utils.ts is created with the cn helper.

What happens during add?

• The component's .tsx file is copied to your components/ui folder.
• Any internal dependencies (like button for alert-dialog) are also added.
• Any required npm packages (like @radix-ui/react-dialog) are installed automatically.

2. Standard Library Style

Install it as a traditional npm package.

npm install @cyberbloxai/ui-kit

Note: If you are using Tailwind CSS v4 and encounter a dependency conflict (ERESOLVE), you can install using: npm install @cyberbloxai/ui-kit --legacy-peer-deps

Quick Start (Library Style)

1. Import Styles: Add the CSS to your main entry file (e.g., main.tsx or App.tsx) before your other imports:

import "@cyberbloxai/ui-kit/styles.css";

2. Tailwind CSS Configuration:

For Tailwind CSS v4 (Recommended)

In your main CSS file (e.g., index.css or app.css), ensure you have:

@import "tailwindcss";
/* If your components are unstyled, you may need to import the library CSS here instead */
@import "@cyberbloxai/ui-kit/styles.css";

For Tailwind CSS v3

In your tailwind.config.js, you must add the library to the content array so Tailwind can find the classes used in the components:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@cyberbloxai/ui-kit/dist/**/*.{js,mjs}" // Add this line
  ],
  // ... rest of config
}

3. Use Components:

import { Button } from "@cyberbloxai/ui-kit";

function App() {
  return (
    <div className="p-8">
      <Button variant="default" onClick={() => console.log("Clicked!")}>
        Click Me
      </Button>
    </div>
  );
}

Troubleshooting

• CLI Not Working: If npx @cyberbloxai/ui-kit fails, try npx @cyberbloxai/ui-kit@latest.
• Blank Page / White Screen: This usually indicates a JavaScript error. Check your browser console (F12 -> Console).
  • Ensure you have react and react-dom installed.
  • If using Vite, try clearing your cache: rm -rf node_modules/.vite and restart with npm run dev.
• Unstyled Components: Ensure you have imported @cyberbloxai/ui-kit/styles.css and configured your Tailwind content (for v3) or @import (for v4).

Technologies Used

• Vite: Next-generation frontend tooling.
• TypeScript: Static typing for better developer experience.
• React: For building user interfaces.
• Radix UI: Unstyled, accessible UI primitives.
• Tailwind CSS: Utility-first CSS framework.
• Lucide React: Beautiful & consistent icons.

Development

If you want to contribute or run the project locally:

# Clone the repository
git clone https://github.com/abhishekjohn1507/uni-kit-forge.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build:lib

License

Created by Abhishek John Charan.