@bloxanaut/ui

v0.1.0

Published

6 days ago

BLOXANAUT Design System - Space-themed UI components for React

0High
0Medium
0Low

kiwi_wirachit

react ui components design-system blox bloxanaut tailwind radix-ui

@blox/ui

🚀 BLOXANAUT Design System - Space-themed UI components for React

A collection of accessible, customizable UI components built with:

Radix UI primitives
Tailwind CSS for styling
class-variance-authority for variants
Full TypeScript support

Installation

# npm
npm install @blox/ui

# pnpm
pnpm add @blox/ui

# yarn
yarn add @blox/ui

Peer Dependencies

pnpm add react react-dom

Setup

1. Import styles

Add the design tokens CSS to your app's entry point:

// app/layout.tsx or _app.tsx
import '@blox/ui/styles.css';

2. Configure Tailwind (if using Tailwind)

Add the package to your content configuration:

// tailwind.config.js
module.exports = {
  content: [
    // ... your content paths
    './node_modules/@blox/ui/dist/**/*.js',
  ],
  // ...
};

Usage

import { Button, Card, Input, Badge } from '@blox/ui';

export default function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter your email" />
      <Button variant="default">Subscribe</Button>
      <Badge variant="solar">NEW</Badge>
    </Card>
  );
}

Components

| Component | Description | |-----------|-------------| | Alert | Notification messages | | Avatar | User avatars with fallback | | Badge | Status indicators and labels | | Button | Interactive buttons with variants | | Calendar | Date picker calendar | | Card | Content containers | | Collapsible | Expandable content sections | | Dialog | Modal dialogs | | Drawer | Bottom/side sheets | | DropdownMenu | Context menus | | Input | Text input fields | | Label | Form labels | | Popover | Floating content panels | | Progress | Progress bars | | Select | Dropdown selections | | Separator | Visual dividers | | Sheet | Side panels | | Skeleton | Loading placeholders | | Slider | Range input | | Tabs | Tabbed navigation |

Button Variants

<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="solar">Solar ⭐</Button>
<Button variant="destructive">Delete</Button>
<Button variant="link">Link</Button>

Badge Variants

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="solar">NEW ⭐</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Outline</Badge>

Theming

The design system uses CSS custom properties for theming. Override in your CSS:

:root {
  --blox-blue-bright: #00A3FF;  /* Your primary color */
  --blox-amber-solar: #FFBC00;  /* Accent color */
  /* ... see tokens.css for all variables */
}

Dark Mode

Add the dark class to your root element:

<html class="dark">
  <!-- Your app -->
</html>

Or use data-theme="dark":

<html data-theme="dark">
  <!-- Your app -->
</html>

Utility Function

The cn utility helps merge Tailwind classes:

import { cn } from '@blox/ui';

function MyComponent({ className }) {
  return (
    <div className={cn('base-classes', className)}>
      Content
    </div>
  );
}

Publishing to npm

First-time Setup

Create npm account at npmjs.com
Login to npm
```
npm login
```
Verify login
```
npm whoami
```

Publishing

# Build the package
pnpm build

# Publish (first time - creates the package)
npm publish --access public

# Publish updates (bump version first)
npm version patch  # or minor, major
npm publish

Scoped Package Setup

Since @blox/ui is a scoped package, you need to either:

Option A: Use your npm username as scope

{
  "name": "@yourusername/ui"
}

Option B: Create an npm organization

Go to npmjs.com → Your Avatar → Organizations → Create
Name it "blox"
Then publish with --access public

Versioning

npm version patch  # 0.1.0 → 0.1.1 (bug fixes)
npm version minor  # 0.1.0 → 0.2.0 (new features)
npm version major  # 0.1.0 → 1.0.0 (breaking changes)

Project Structure

blox-design-system/
├── src/
│   ├── components/       # UI components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── ...
│   ├── lib/
│   │   └── utils.ts      # cn() utility
│   ├── styles/
│   │   └── tokens.css    # Design tokens
│   └── index.ts          # Main entry
├── dist/                 # Built output
├── package.json
├── tsconfig.json
└── tsup.config.ts

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Build in watch mode
pnpm dev

# Typecheck
pnpm typecheck