Reference

Utility Helpers

Rapidly compose layouts and style any component without writing custom CSS. Since every component accepts a className prop, helper classes work everywhere — on Button, Card, plain divs, or any element.

All helpers use !important

They override component inline styles, so they always take effect when applied via className.

Press Cmd/Ctrl + K or use Spotlight to quickly jump to any helper or section.

Spotlight Search

A real Spotlight preview with BiibaOS components styled using className for layout and spacing.

Search helper classes with Spotlight

Open the Spotlight search and type any helper name or category to jump straight to the example you need.

Try m-4, text-center, flex, or bg-primary-tint.

import React, { useState } from 'react'
import { Button, View, Text, Spotlight } from 'biibaos'

const items = [
  { id: 'spacing', title: 'Margins', description: 'Jump to spacing helpers.', group: 'Helpers', onSelect: () => {} },
  { id: 'colors', title: 'Colors', description: 'Browse color utility classes.', group: 'Helpers', onSelect: () => {} },
  { id: 'flexbox', title: 'Flexbox', description: 'Search flex layout helpers.', group: 'Helpers', onSelect: () => {} },
]

export default function HelpersSpotlightPreview() {
  const [open, setOpen] = useState(false)

  return (
    <View className="flex flex-col gap-4">
      <View className="flex flex-col gap-2">
        <Text variant="h2">Search helper classes with Spotlight</Text>
        <Text variant="body" color="muted" className="max-w-2xl">
          Open Spotlight and type any helper name or category to jump straight to the example you need.
        </Text>
      </View>

      <View className="flex flex-col gap-3 sm:flex-row sm:items-center w-100">
        <Button variant="primary" onClick={() => setOpen(true)} className="w-100 sm:w-auto">
          Open helper search
        </Button>
      </View>

      <Spotlight
        isOpen={open}
        onClose={() => setOpen(false)}
        items={items}
        placeholder="Search helper categories or sections..."
        style={{ width: '100%' }}
      />
    </View>
  )
}

Margins

A 4px-based margin scale. Use m- for all sides, or prefix mt-, mb-, ml-, mr- for a single direction. mx-auto and my-auto for automatic centering.

Each button has a different margin applied via className.

<Button className="mb-4">Save Changes</Button>
<Button className="mt-8">Submit</Button>
<Button className="ml-2 mr-2">Centered</Button>

{/* mx-auto to center a block */}
<Card className="w-50 mx-auto">
  <CardBody>Centered card</CardBody>
</Card>

{/* All-sides shorthand */}
<div className="m-4 p-4 border rounded-md">Margin + padding</div>

Padding

Same 4px scale as margins but for padding. Works on any element with a className prop.

.p-1 (4px)

.p-3 (12px)

.p-5 (20px)

.p-8 (32px)

<Card className="p-6">Padded card (24px)</Card>
<Button className="pt-2 pb-2 pl-6 pr-6">Custom padding</Button>

{/* Directional padding */}
<div className="pt-4 pb-8">Top 16px / Bottom 32px</div>

Dimensions

Width (w-) and height (h-) helpers. Numbers 10–40 map to pixel values (×4), 50 / 75 / 100 are percentages, and screen variants use viewport units.

.w-100 → 100%

.w-75 → 75%

.w-50 → 50%

.h-10

.h-20

.h-30

{/* Full-width button */}
<Button className="w-100">Full Width</Button>

{/* Fixed height input wrapper */}
<div className="h-40 overflow-hidden">...</div>

{/* Max width container */}
<div className="max-w-lg mx-auto">Constrained width content</div>

Colors

Apply semantic backgrounds using short class names. Tint variants (.bg-primary-tint) add a subtle 10% wash. Text color classes like .text-danger work on any element.

.primary

.success

.danger

.warning

.secondary

.bg-primary-light

.bg-primary-tint

.bg-success-tint

.bg-danger-tint

.bg-warning-tint

.text-primary.text-success.text-danger.text-muted

{/* Solid backgrounds */}
<div className="primary p-4 rounded-md">Primary block</div>
<div className="danger p-4 rounded-md">Danger block</div>

{/* Lighter primary color helper (uses theme primaryLight value) */}
<div className="bg-primary-light p-4 rounded-md">Lighter primary helper</div>

{/* Subtle tints */}
<Card className="bg-primary-tint border border-primary rounded-lg">
  <CardBody>Tinted card</CardBody>
</Card>

{/* Text color */}
<Text className="text-danger">Something went wrong</Text>
<Text className="text-success">Operation successful!</Text>

Typography

Font size, weight, alignment, and transform helpers. Combine freely on any text element.

text-3xl + font-bold

text-lg + font-semibold + text-primary

text-sm + text-muted + uppercase

text-xs + italic + text-subtle

truncate: This long text will be clipped and show an ellipsis at the end.

<h1 className="text-3xl font-bold">Page Title</h1>
<p className="text-sm text-muted">Helper subtitle text</p>
<span className="uppercase font-semibold text-primary">category</span>

{/* Truncate long text */}
<p className="truncate w-50">Very long text that gets clipped…</p>

{/* Align text */}
<p className="text-center font-medium">Centered content</p>

Border Radius

Apply theme-consistent radius or override with precise values. rounded-full creates a pill/circle shape.

.rounded-none

.rounded-sm

.rounded-md

.rounded-lg

.rounded-xl

.rounded-full

<Button className="rounded-full">Pill Button</Button>
<Card className="rounded-none">Sharp corners</Card>
<div className="rounded-xl bg-primary-tint p-4">XL radius block</div>

Display

Quickly switch display modes. .hidden hides the element, .flex sets display:flex, .block forces block layout.

.flex.inline-block.inline

{/* Row of items */}
<div className="flex items-center gap-4">
  <Avatar initials="AB" />
  <Text>User name</Text>
</div>

{/* Hide on print / conditionally */}
<div className={isHidden ? 'hidden' : 'block'}>
  Conditional content
</div>

Flexbox

Combine flex layout helpers to quickly align and distribute content without writing any custom CSS.

Left

justify-between

Right

ABC

Item 1

Item 2

Item 3

{/* Space between */}
<div className="flex items-center justify-between gap-4">
  <Text>Label</Text>
  <Button size="sm">Action</Button>
</div>

{/* Column stack with gap */}
<div className="flex flex-col gap-3">
  <Input placeholder="Name" />
  <Input placeholder="Email" />
  <Button className="w-100">Submit</Button>
</div>

{/* Centered row */}
<div className="flex items-center justify-center gap-2">
  <Spinner size="sm" />
  <Text>Loading…</Text>
</div>

Overflow

Control element overflow for scrollable areas or hidden content.

.overflow-hidden — text clipped inside this box that is too long

.overflow-auto — scroll when content overflows this container boundary

{/* Clipped image container */}
<div className="overflow-hidden rounded-lg h-40">
  <img src="..." className="w-100" />
</div>

{/* Scrollable list */}
<div className="overflow-y-auto h-30">
  {items.map(i => <div key={i}>{i}</div>)}
</div>

Opacity

Set element opacity at predefined levels.

<Button className="opacity-50">Half opacity</Button>
<div className={isDisabled ? 'opacity-50 pointer-none' : ''}>
  Conditionally faded
</div>

Borders & Shadows

Quickly add borders and elevation shadows without inline styles.

.border

.border-2

.border-primary

.border-danger

.shadow-sm

.shadow-md

<Card className="border-primary shadow-md">Highlighted card</Card>
<Input className="border-danger" placeholder="Error state" />
<div className="border-none shadow-none">No decoration</div>

Positioning

Positioning utilities with inset helpers for absolute overlays and z-index stacking.

.relative parent

.absolute

.relative

.absolute

.sticky

.fixed

{/* Overlay badge on avatar */}
<div className="relative inline-flex">
  <Avatar initials="JD" />
  <span className="absolute bottom-0 right-0 rounded-full bg-success" style={{ width: 10, height: 10 }} />
</div>

{/* Sticky header */}
<div className="sticky top-0 z-50 bg-surface border-bottom">
  Sticky navigation
</div>

{/* Full overlay */}
<div className="absolute inset-0 bg-primary opacity-50" />

Misc Helpers

Cursor, pointer events, user selection, and z-index helpers for interactive states.

.cursor-pointer

.cursor-not-allowed

.select-none (try selecting)

{/* Prevent selection on UI labels */}
<div className="select-none flex items-center gap-2 cursor-pointer" onClick={toggle}>
  <Checkbox checked={val} />
  <span>I agree to terms</span>
</div>

{/* Disabled overlay */}
<div className={disabled ? 'pointer-none opacity-50' : ''}>
  <Button>Action</Button>
</div>

{/* Layer stacking */}
<div className="fixed inset-0 z-50 flex items-center justify-center">
  <Modal />
</div>

All Helpers — Quick Reference

The full set. Use Spotlight (Cmd/Ctrl + K) to jump straight to any helper category or reference section.

Margins

.m-0 (0px).m-1 (4px).m-2 (8px).m-3 (12px).m-4 (16px).m-5 (20px).m-6 (24px).m-8 (32px).m-10 (40px).mt-0..10.mb-0..10.ml-0..10.mr-0..10.mx-auto.my-auto

Padding

.p-0..10.pt-0..8.pb-0..8.pl-0..8.pr-0..8

Width

.w-10 (40px).w-20 (80px).w-30 (120px).w-40 (160px).w-50 (50%).w-75 (75%).w-100 (100%).w-auto.w-screen.max-w-sm (480px).max-w-md (640px).max-w-lg (900px).max-w-xl (1200px)

Height

.h-10 (40px).h-20 (80px).h-30 (120px).h-40 (160px).h-50 (50%).h-100 (100%).h-auto.h-screen

Background

.primary / bg-primary.secondary / bg-secondary.success / bg-success.danger / bg-danger.warning / bg-warning.bg-surface.bg-transparent.bg-primary-light / primary-light.bg-primary-tint.bg-success-tint.bg-danger-tint.bg-warning-tint

Text Color

.text-primary.text-secondary.text-muted.text-subtle.text-success.text-danger.text-warning

Typography

.text-xs.text-sm.text-md.text-lg.text-xl.text-2xl.text-3xl.font-normal.font-medium.font-semibold.font-bold.text-left.text-center.text-right.uppercase.lowercase.capitalize.italic.underline.no-underline.truncate

Border Radius

.rounded-none.rounded-sm.rounded.rounded-md.rounded-lg.rounded-xl.rounded-full

Display

.block.inline.inline-block.flex.inline-flex.grid.hidden

Flexbox

.flex-row.flex-col.flex-wrap.flex-nowrap.flex-1.flex-none.items-start.items-center.items-end.items-stretch.justify-start.justify-center.justify-end.justify-between.justify-around.self-start.self-center.self-end.self-stretch.gap-1 (4px).gap-2 (8px).gap-3 (12px).gap-4 (16px).gap-5 (20px).gap-6 (24px).gap-8 (32px)

Overflow

.overflow-hidden.overflow-auto.overflow-scroll.overflow-x-auto.overflow-y-auto

Opacity

.opacity-0.opacity-25.opacity-50.opacity-75.opacity-100

Borders

.border.border-2.border-none.border-primary.border-danger.shadow-none.shadow-sm.shadow-md

Position

.relative.absolute.fixed.sticky.static.inset-0.top-0.bottom-0.left-0.right-0.z-0.z-10.z-50.z-100

Misc

.cursor-pointer.cursor-default.cursor-not-allowed.pointer-none.pointer-auto.select-none

Theming

Components