@unimatrix-01/ui

A modern React UI component library with a cyberpunk theme, built with TypeScript, Tailwind CSS, and Vite.

Installation

npm install @unimatrix-01/ui
# or
yarn add @unimatrix-01/ui
# or
pnpm add @unimatrix-01/ui

Creating a New Project

You can create a new project with Borg UI using our CLI tool. The tool will create a new directory with your specified name and set up the project inside it:

# Using npm
npx @unimatrix-01/create-borg-ui my-app

# Using yarn
yarn create @unimatrix-01/borg-ui my-app

# Using pnpm
pnpm create @unimatrix-01/borg-ui my-app

The CLI will:

1. Create a new directory called my-app in your current location
2. Create a new Vite + React + TypeScript project in that directory
3. Install all necessary dependencies including Borg UI
4. Set up Tailwind CSS with the correct configuration
5. Create example components using Borg UI
6. Set up a basic project structure following best practices

After creation, you can start developing:

cd my-app
npm run dev

Usage

First, import the CSS in your app's entry point (e.g., main.tsx or App.tsx):

import '@unimatrix-01/ui/dist/index.css';

Then import and use the components:

import { Button, Card, TextInput } from '@unimatrix-01/ui';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Card title="My Card">Card content</Card>
      <TextInput label="Username" placeholder="Enter username" />
    </div>
  );
}

Component Documentation

Avatar

A circular or square avatar component that can display an image, initials, or both.

<Avatar 
  src="https://example.com/avatar.jpg" 
  alt="User Avatar" 
  initials="JD" 
  status="online" 
  size="md" 
  rounded={true} 
/>

Props:

• src: URL of the avatar image
• alt: Alt text for the image
• initials: Fallback initials to display if image fails to load
• status: 'online' | 'offline' | 'away' | 'busy'
• size: 'sm' | 'md' | 'lg'
• rounded: boolean (default: true)

Badge

A small badge component for displaying status, counts, or labels.

<Badge 
  variant="info" 
  pill={true} 
  removable={true} 
  onRemove={() => console.log('removed')}
>
  New
</Badge>

Props:

• variant: 'default' | 'info' | 'success' | 'warning' | 'error'
• pill: boolean (default: false)
• removable: boolean (default: false)
• onRemove: () => void

Button

A versatile button component with multiple styles and variants.

<Button 
  styleType="primary" 
  icon="left" 
  iconName="placeholder" 
  label="Click Me"
>
  Button Text
</Button>

Props:

• styleType: 'primary' | 'secondary' | 'destructive' | 'info' | 'warn'
• icon: 'left' | 'right' | 'off'
• iconName: string (icon identifier)
• label: string
• disabled: boolean
• onClick: () => void

ToggleButton

A button that can be toggled on/off.

<ToggleButton 
  styleType="primary" 
  icon="left" 
  iconName="placeholder" 
  label="Toggle Me"
  defaultToggled={false}
  onToggledChange={(toggled) => console.log(toggled)}
/>

Props:

• styleType: 'primary' | 'secondary' | 'destructive' | 'info' | 'warn'
• icon: 'left' | 'right' | 'off'
• iconName: string
• label: string
• defaultToggled: boolean
• toggled: boolean (controlled mode)
• onToggledChange: (toggled: boolean) => void

Card

A container component for grouping related content.

<Card 
  title="Card Title" 
  subtitle="Card Subtitle" 
  variant="primary"
  image={imageUrl}
  actions={<Button>Action</Button>}
  clickable={true}
  onClick={() => console.log('clicked')}
>
  Card content
</Card>

Props:

• title: string
• subtitle: string
• variant: 'default' | 'primary' | 'outlined'
• image: string (URL)
• actions: ReactNode
• clickable: boolean
• onClick: () => void
• disabled: boolean

Checkbox

A checkbox input component.

<Checkbox 
  checked={checked} 
  onChange={setChecked} 
  label="Check me" 
  indeterminate={false}
  disabled={false}
/>

Props:

• checked: boolean
• onChange: (checked: boolean) => void
• label: string
• indeterminate: boolean
• disabled: boolean

DatePicker

A date selection component.

<DatePicker 
  label="Select Date" 
  value={date} 
  onChange={setDate}
  pickerType="single" // or "range" or "multiple"
  placeholder="Pick a date"
  clearable={true}
  helperText="Select a date"
  error={false}
/>

Props:

• label: string
• value: Date | [Date, Date] | Date[] | null
• onChange: (value: Date | [Date, Date] | Date[] | null) => void
• pickerType: 'single' | 'range' | 'multiple'
• placeholder: string
• clearable: boolean
• helperText: string
• error: boolean

Dropdown

A dropdown selection component.

<Dropdown 
  label="Select Option" 
  options={options} 
  value={selected}
  onChange={setSelected}
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  placeholder="Select..."
  multiSelect={false}
/>

Props:

• label: string
• options: DropdownOption[]
• value: string | string[]
• onChange: (value: string | string[]) => void
• isOpen: boolean
• onOpenChange: (isOpen: boolean) => void
• placeholder: string
• multiSelect: boolean

Icon

A component for displaying SVG icons.

<Icon 
  name="placeholder" 
  size={32} 
  color="var(--content-primary)" 
/>

Props:

• name: string
• size: number
• color: string

Menu

A navigation menu component.

<Menu 
  items={menuItems} 
  orientation="horizontal" // or "vertical"
/>

Props:

• items: MenuItem[]
• orientation: 'horizontal' | 'vertical'

Modal

A modal dialog component.

<Modal 
  isOpen={isOpen} 
  onClose={() => setIsOpen(false)}
  title="Modal Title"
  status="info" // or "success", "warning", "error"
  icon="placeholder"
  actions={[
    {
      label: "Cancel",
      onClick: () => setIsOpen(false),
      style: "secondary"
    },
    {
      label: "Confirm",
      onClick: () => setIsOpen(false),
      style: "primary",
      autoFocus: true
    }
  ]}
>
  Modal content
</Modal>

Props:

• isOpen: boolean
• onClose: () => void
• title: string
• status: 'info' | 'success' | 'warning' | 'error'
• icon: string
• actions: ModalAction[]

Radio

A radio button component.

<Radio 
  name="group" 
  value="option1"
  checked={selected === "option1"}
  onChange={setSelected}
  label="Option 1"
  disabled={false}
/>

Props:

• name: string
• value: string
• checked: boolean
• onChange: (value: string) => void
• label: string
• disabled: boolean

Table

A data table component with sorting and filtering.

<Table 
  columns={[
    { key: "name", label: "Name", sortable: true },
    { key: "age", label: "Age", sortable: true }
  ]}
  data={tableData}
  pageSize={10}
  filterText={filter}
  onFilterTextChange={setFilter}
  showPagination={true}
  selectable={true}
  selectedRows={selectedRows}
  onSelectedRowsChange={setSelectedRows}
/>

Props:

• columns: TableColumn[]
• data: any[]
• pageSize: number
• filterText: string
• onFilterTextChange: (text: string) => void
• showPagination: boolean
• selectable: boolean
• selectedRows: number[]
• onSelectedRowsChange: (rows: number[]) => void

TextInput

A text input component with various states and features.

<TextInput 
  label="Username" 
  value={value}
  onChange={setValue}
  placeholder="Enter username"
  error={false}
  warning={false}
  disabled={false}
  maxLength={50}
  dropdownOptions={["Option 1", "Option 2"]}
  validationRules={{
    required: true,
    minLength: 3
  }}
  errorMessage="Invalid input"
/>

Props:

• label: string
• value: string
• onChange: (value: string) => void
• placeholder: string
• error: boolean
• warning: boolean
• disabled: boolean
• maxLength: number
• dropdownOptions: string[]
• validationRules: ValidationRules
• errorMessage: string

TextArea

A multi-line text input component.

<TextArea 
  label="Description" 
  value={value}
  onChange={setValue}
  placeholder="Enter description"
  lineHeight={4}
  maxLength={500}
  error={false}
  warning={false}
  disabled={false}
  errorMessage="Invalid input"
  warningMessage="Warning message"
/>

Props:

• label: string
• value: string
• onChange: (value: string) => void
• placeholder: string
• lineHeight: number
• maxLength: number
• error: boolean
• warning: boolean
• disabled: boolean
• errorMessage: string
• warningMessage: string

TimePicker

A time selection component.

<TimePicker 
  label="Select Time" 
  value={time}
  onChange={setTime}
  format="hh:mm A"
  showSeconds={false}
  step={15}
  minTime={new Date(0, 0, 0, 9, 0)}
  maxTime={new Date(0, 0, 0, 17, 0)}
  clearable={true}
  helperText="Select a time"
  error={false}
/>

Props:

• label: string
• value: Date | null
• onChange: (value: Date | null) => void
• format: string
• showSeconds: boolean
• step: number
• minTime: Date
• maxTime: Date
• clearable: boolean
• helperText: string
• error: boolean

Toggle

A simple toggle switch component.

<Toggle 
  checked={checked} 
  onToggle={setChecked}
  disabled={false}
/>

Props:

• checked: boolean
• onToggle: (checked: boolean) => void
• disabled: boolean

Tooltip

A tooltip component for displaying additional information.

<Tooltip 
  content="Tooltip content" 
  placement="top" // or "right", "bottom", "left"
  disabled={false}
>
  <button>Hover me</button>
</Tooltip>

Props:

• content: ReactNode
• placement: 'top' | 'right' | 'bottom' | 'left'
• disabled: boolean

WarpSpeedBackground

A dynamic background component with a warp speed effect.

<WarpSpeedBackground />

No props required.

Tailwind CSS Setup

This library uses Tailwind CSS. Make sure your project has Tailwind CSS installed and configured. Add the following to your tailwind.config.js:

module.exports = {
  content: [
    // ... your content configuration
    './node_modules/@unimatrix-01/ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // ... your theme extensions
    },
  },
  plugins: [
    // ... your plugins
  ],
};

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

License

MIT