A modern React UI component library with a cyberpunk theme, built with TypeScript, Tailwind CSS, and Vite.
npm install @unimatrix-01/uiA modern React UI component library with a cyberpunk theme, built with TypeScript, Tailwind CSS, and Vite.
``bash`
npm install @unimatrix-01/uior
yarn add @unimatrix-01/uior
pnpm add @unimatrix-01/ui
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:
`bashUsing npm
npx @unimatrix-01/create-borg-ui my-app
The CLI will:
1. Create a new directory called
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 practicesAfter creation, you can start developing:
`bash
cd my-app
npm run dev
`Usage
First, import the CSS in your app's entry point (e.g.,
or App.tsx):`tsx
import '@unimatrix-01/ui/dist/index.css';
`Then import and use the components:
tsx
import { Button, Card, TextInput } from '@unimatrix-01/ui';function App() {
return (
Card content
);
}
`Component Documentation
$3
A circular or square avatar component that can display an image, initials, or both.tsx
alt="User Avatar"
initials="JD"
status="online"
size="md"
rounded={true}
/>
`Props:
-
: 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)$3
A small badge component for displaying status, counts, or labels.`tsx
pill={true}
removable={true}
onRemove={() => console.log('removed')}
>
New
`Props:
-
: 'default' | 'info' | 'success' | 'warning' | 'error'
- pill: boolean (default: false)
- removable: boolean (default: false)
- onRemove: () => void$3
A versatile button component with multiple styles and variants.`tsx
styleType="primary"
icon="left"
iconName="placeholder"
label="Click Me"
>
Button Text
`Props:
-
: 'primary' | 'secondary' | 'destructive' | 'info' | 'warn'
- icon: 'left' | 'right' | 'off'
- iconName: string (icon identifier)
- label: string
- disabled: boolean
- onClick: () => void$3
A button that can be toggled on/off.`tsx
icon="left"
iconName="placeholder"
label="Toggle Me"
defaultToggled={false}
onToggledChange={(toggled) => console.log(toggled)}
/>
`Props:
-
: 'primary' | 'secondary' | 'destructive' | 'info' | 'warn'
- icon: 'left' | 'right' | 'off'
- iconName: string
- label: string
- defaultToggled: boolean
- toggled: boolean (controlled mode)
- onToggledChange: (toggled: boolean) => void$3
A container component for grouping related content.`tsx
subtitle="Card Subtitle"
variant="primary"
image={imageUrl}
actions={}
clickable={true}
onClick={() => console.log('clicked')}
>
Card content
`Props:
-
: string
- subtitle: string
- variant: 'default' | 'primary' | 'outlined'
- image: string (URL)
- actions: ReactNode
- clickable: boolean
- onClick: () => void
- disabled: boolean$3
A checkbox input component.`tsx
onChange={setChecked}
label="Check me"
indeterminate={false}
disabled={false}
/>
`Props:
-
: boolean
- onChange: (checked: boolean) => void
- label: string
- indeterminate: boolean
- disabled: boolean$3
A date selection component.`tsx
value={date}
onChange={setDate}
pickerType="single" // or "range" or "multiple"
placeholder="Pick a date"
clearable={true}
helperText="Select a date"
error={false}
/>
`Props:
-
: 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$3
A dropdown selection component.`tsx
options={options}
value={selected}
onChange={setSelected}
isOpen={isOpen}
onOpenChange={setIsOpen}
placeholder="Select..."
multiSelect={false}
/>
`Props:
-
: string
- options: DropdownOption[]
- value: string | string[]
- onChange: (value: string | string[]) => void
- isOpen: boolean
- onOpenChange: (isOpen: boolean) => void
- placeholder: string
- multiSelect: boolean$3
A component for displaying SVG icons.`tsx
size={32}
color="var(--content-primary)"
/>
`Props:
-
: string
- size: number
- color: string$3
A navigation menu component.`tsx
items={menuItems}
orientation="horizontal" // or "vertical"
/>
`Props:
-
: MenuItem[]
- orientation: 'horizontal' | 'vertical'$3
A modal dialog component.`tsx
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
`Props:
-
: boolean
- onClose: () => void
- title: string
- status: 'info' | 'success' | 'warning' | 'error'
- icon: string
- actions: ModalAction[]$3
A radio button component.`tsx
value="option1"
checked={selected === "option1"}
onChange={setSelected}
label="Option 1"
disabled={false}
/>
`Props:
-
: string
- value: string
- checked: boolean
- onChange: (value: string) => void
- label: string
- disabled: boolean$3
A data table component with sorting and filtering.`tsx
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:
-
: TableColumn[]
- data: any[]
- pageSize: number
- filterText: string
- onFilterTextChange: (text: string) => void
- showPagination: boolean
- selectable: boolean
- selectedRows: number[]
- onSelectedRowsChange: (rows: number[]) => void$3
A text input component with various states and features.`tsx
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:
-
: string
- value: string
- onChange: (value: string) => void
- placeholder: string
- error: boolean
- warning: boolean
- disabled: boolean
- maxLength: number
- dropdownOptions: string[]
- validationRules: ValidationRules
- errorMessage: string$3
A multi-line text input component.`tsx
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:
-
: string
- value: string
- onChange: (value: string) => void
- placeholder: string
- lineHeight: number
- maxLength: number
- error: boolean
- warning: boolean
- disabled: boolean
- errorMessage: string
- warningMessage: string$3
A time selection component.`tsx
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:
-
: 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$3
A simple toggle switch component.`tsx
onToggle={setChecked}
disabled={false}
/>
`Props:
-
: boolean
- onToggle: (checked: boolean) => void
- disabled: boolean$3
A tooltip component for displaying additional information.`tsx
placement="top" // or "right", "bottom", "left"
disabled={false}
>
`Props:
-
: ReactNode
- placement: 'top' | 'right' | 'bottom' | 'left'
- disabled: boolean$3
A dynamic background component with a warp speed effect.`tsx
`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
:`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
bash
Install dependencies
npm installStart development server
npm run devBuild the library
npm run build
``MIT