RanchUI

Ranch Computing design system — React component library with dark and light themes.

Install in another project

Create a .npmrc file in the root of your consuming project:

@experimentals:registry=https://gitlab.ranchcomputing.com/api/v4/projects/203/packages/npm/
//gitlab.ranchcomputing.com/api/v4/projects/203/packages/npm/:_authToken=YOUR_PERSONAL_ACCESS_TOKEN

Then install:

npm install @experimentals/ranchui

Get your Personal Access Token:
GitLab → avatar → Edit profile → Access Tokens → create one with scope read_package_registry.

The CI_JOB_TOKEN in .npmrc is auto-injected by GitLab CI — no manual setup needed for the pipeline.

Docker / Portainer

Build and run Storybook as a static site served by nginx.

Run with Docker Compose

docker compose up -d --build

Storybook is available at http://localhost:6006.

Deploy in Portainer

1. Push this repo to a Git server (GitHub, Gitea, etc.)
2. In Portainer → Stacks → Add stack
3. Choose Repository and point it at this repo
4. Set the compose file path to docker-compose.yml
5. Click Deploy the stack

The container will be named ranchui, restart automatically, and expose port 6006.

Change the port

Edit docker-compose.yml and change the left side of the port mapping:

ports:
  - "8080:80"   # now available at :8080

Getting started

# 1. Install dependencies
npm install

# 2. Start Storybook (all components visible with dark/light toggle in toolbar)
npm run storybook

# 3. Build the library for publishing
npm run build

Installation

npm install ranchui

Peer dependencies (install if not already in your project):

npm install react react-dom

Usage

Import the stylesheet once at your app entry point, then import components as needed:

import 'ranchui/styles'

import { ThemeProvider, Button, Table, StatusBadge } from 'ranchui'

function App() {
  return (
    <ThemeProvider theme="dark">
      <Button variant="primary">Download</Button>
    </ThemeProvider>
  )
}

ThemeProvider

Wrap your app (or any subtree) in ThemeProvider to apply a theme. Use the useTheme hook to read or change the theme from any child component.

import { ThemeProvider, useTheme, ToggleButton } from 'ranchui'

function Header() {
  const { theme, setTheme } = useTheme()
  return <ToggleButton theme={theme} onToggle={setTheme} />
}

function App() {
  return (
    <ThemeProvider theme="dark">
      <Header />
    </ThemeProvider>
  )
}

Themes: "dark" (navy, Ranch Computing default) and "light" (white).

Components

Brand

Logo

import { Logo } from 'ranchui'

<Logo size="md" title="RANCH COMPUTING" subtitle="Render Farm" />

Props: size ("sm" | "md" | "lg"), title, subtitle, className.

Navigation

BurgerMenu

import { BurgerMenu } from 'ranchui'

<BurgerMenu items={[
  { label: 'Web Dashboard', onClick: () => {} },
  { label: 'Estimation',    onClick: () => {} },
  { label: 'Refill',        onClick: () => {} },
  { label: 'Logout',        onClick: () => {} },
  { label: 'Quit',          onClick: () => {}, variant: 'danger' },
]} />

Props: items: MenuItem[], className.
MenuItem: { label, onClick, icon?, variant?: "default" | "danger" }.

Controls

Button

import { Button } from 'ranchui'

<Button variant="primary" leftIcon={<DownloadIcon />}>Download</Button>
<Button variant="danger">Stop</Button>
<Button variant="ghost">Cancel</Button>
<Button loading>Processing…</Button>

Props: variant ("primary" | "danger" | "ghost" | "secondary"), size ("sm" | "md" | "lg"), loading, leftIcon, all native <button> attributes.

ToggleButton

import { ToggleButton } from 'ranchui'

<ToggleButton theme={theme} onToggle={setTheme} />

Checkbox

import { Checkbox } from 'ranchui'

<Checkbox checked={checked} onChange={setChecked} label="Select all" />
<Checkbox checked={false} indeterminate onChange={() => {}} label="Partial" />

FilterButton

import { FilterButton } from 'ranchui'

<FilterButton active count={3} onClick={() => {}} />

Inputs

SearchInput

import { SearchInput } from 'ranchui'

<SearchInput placeholder="Search by ID or Project" onSearch={(v) => console.log(v)} />

LineEdit

import { LineEdit } from 'ranchui'

// Plain text input
<LineEdit placeholder="Enter value…" label="Output path" />

// With file picker button
<LineEdit
  label="Scene file"
  placeholder="C:\scenes\project.blend"
  showFilePicker
  accept=".blend,.c4d,.max"
  onFileSelect={(path) => console.log(path)}
/>

Data Display

StatusBadge

import { StatusBadge } from 'ranchui'

<StatusBadge status="finished" />
<StatusBadge status="invalid" />
<StatusBadge status="created" />

Statuses: "created" | "finished" | "invalid" | "rendering" | "pending" | "stopped" | "error".

Tag

import { Tag } from 'ranchui'

<Tag label="GPU-Low" />
<Tag label="Redshift" variant="brand" />
<Tag label="Cinema 4D" onRemove={() => {}} />

Table

import { Table, StatusBadge } from 'ranchui'

interface Project { id: number; name: string; cost: string; status: string }

<Table<Project>
  columns={[
    { key: 'id',     header: 'ID',      sortable: true },
    { key: 'name',   header: 'Project', sortable: true },
    { key: 'cost',   header: 'Cost' },
    { key: 'status', header: 'Status',  render: (v) => <StatusBadge status={v as any} /> },
  ]}
  data={projects}
  sortState={sortState}
  onSort={handleSort}
  rowKey={(r) => String(r.id)}
  onRowClick={(r) => selectProject(r)}
/>

Pagination

import { Pagination } from 'ranchui'

<Pagination
  page={page}
  totalPages={206}
  totalItems={5132}
  rowsPerPage={10}
  rowsPerPageOptions={[10, 20, 50]}
  onPageChange={setPage}
  onRowsPerPageChange={setRowsPerPage}
/>

SectionInfo

import { SectionInfo } from 'ranchui'

<SectionInfo
  title="Untitled_1_.vuc"
  entries={[
    { label: 'Render Farm', value: 'GPU-Low' },
    { label: 'Software',    value: 'Cinema 4D 2023' },
    { label: 'Renderer',    value: 'Redshift' },
    { label: 'Resolution',  value: '1920 × 1080' },
    { label: 'Frame range', value: '1 - 250' },
  ]}
/>

Media

ImagePreview

import { ImagePreview } from 'ranchui'

<ImagePreview src="/renders/frame_001.jpg" alt="Render preview" label="frame_001.jpg" width={80} height={80} />
// No src → shows placeholder
<ImagePreview alt="No preview" label="Rend...iew.jpg" width={80} height={80} />

VideoPreview

import { VideoPreview } from 'ranchui'

<VideoPreview src="/renders/preview.mp4" width={340} showSlider />
// No src → shows "No preview available" placeholder
<VideoPreview width={340} />

Development

# Install dependencies
npm install

# Start Storybook (port 6006) — use the toolbar to switch dark/light
npm run storybook

# Build the library (outputs to dist/)
npm run build

Publishing to npm

npm login
npm publish --access public

The "files" field in package.json ensures only dist/ is shipped.
Consumers must also import the stylesheet:

import 'ranchui/styles'

License

UNLICENSED — Ranch Computing internal use.