acai-ui-library

A production-ready, fully-branded React component library for the HumanCloud ecosystem.

Installation

npm install acai-ui-library
# or
pnpm add acai-ui-library

Quick Start

1. Import the styles in your root layout:

import "acai-ui-library/styles"

2. Wrap your app with the ThemeProvider:

import { ThemeProvider } from "acai-ui-library"

export default function App({ children }) {
  return (
    <ThemeProvider attribute="data-theme" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  )
}

3. Use components:

import { Button, Card, CardHeader, CardTitle, CardContent } from "acai-ui-library"

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello HumanCloud</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  )
}

Brand Colors

| Token | Value | Usage | |-------|-------|-------| | Primary 500 | #5542CA | Brand primary (purple) | | Secondary 200 | #E7AF45 | Secondary (gold) | | Tertiary 200 | #79DF43 | Tertiary (green) | | Grey 700 | #1A1A1E | Foreground |

Components (50+)

Inputs & Forms: Button, Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider, Toggle, Toggle Group, Label, Form, Input OTP

Display & Feedback: Badge, Avatar, Alert, Progress, Skeleton, Spinner, Separator, Scroll Area, Aspect Ratio

Overlay & Popovers: Dialog, Alert Dialog, Sheet, Drawer, Popover, Tooltip, Hover Card, Context Menu, Dropdown Menu

Navigation & Layout: Tabs, Accordion, Collapsible, Navigation Menu, Breadcrumb, Menubar, Sidebar, Card, Resizable

Data & Complex: Table, Data Table, Pagination, Calendar, Date Picker, Command, Carousel, Chart

Typography: H1-H4, Body, Small, Caption, Lead, Muted, Code

Dark Mode

Supports data-theme="dark", .dark class, and prefers-color-scheme: dark.

License

MIT