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
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 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.,
main.tsx 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
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)$3
A small badge component for displaying status, counts, or labels.`tsx
variant="info"
pill={true}
removable={true}
onRemove={() => console.log('removed')}
>
New
`Props:
-
variant: '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:
-
styleType: '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
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$3
A container component for grouping related content.`tsx
title="Card Title"
subtitle="Card Subtitle"
variant="primary"
image={imageUrl}
actions={}
clickable={true}
onClick={() => console.log('clicked')}
>
Card content
`Props:
-
title: string
- subtitle: string
- variant: 'default' | 'primary' | 'outlined'
- image: string (URL)
- actions: ReactNode
- clickable: boolean
- onClick: () => void
- disabled: boolean$3
A checkbox input component.`tsx
checked={checked}
onChange={setChecked}
label="Check me"
indeterminate={false}
disabled={false}
/>
`Props:
-
checked: boolean
- onChange: (checked: boolean) => void
- label: string
- indeterminate: boolean
- disabled: boolean$3
A date selection component.`tsx
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$3
A dropdown selection component.`tsx
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$3
A component for displaying SVG icons.`tsx
name="placeholder"
size={32}
color="var(--content-primary)"
/>
`Props:
-
name: string
- size: number
- color: string$3
A navigation menu component.`tsx
items={menuItems}
orientation="horizontal" // or "vertical"
/>
`Props:
-
items: MenuItem[]
- orientation: 'horizontal' | 'vertical'$3
A modal dialog component.`tsx
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
`Props:
-
isOpen: boolean
- onClose: () => void
- title: string
- status: 'info' | 'success' | 'warning' | 'error'
- icon: string
- actions: ModalAction[]$3
A radio button component.`tsx
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$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:
-
columns: 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
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$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:
-
label: 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
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$3
A simple toggle switch component.`tsx
checked={checked}
onToggle={setChecked}
disabled={false}
/>
`Props:
-
checked: boolean
- onToggle: (checked: boolean) => void
- disabled: boolean$3
A tooltip component for displaying additional information.`tsx
content="Tooltip content"
placement="top" // or "right", "bottom", "left"
disabled={false}
>
`Props:
-
content: 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
tailwind.config.js:`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