Getting started

Install & configure

@hourworth/ui is a self-contained package: design tokens, theming, density, and accessible components built on Base UI and Tailwind v4. Three steps to a running app.

1. Install

Terminal

pnpm add @hourworth/ui

2. Add styles & providers

Import the stylesheet once at the root and wrap your app in the theme and density providers. Tokens are exposed as CSS variables, so everything themes together.

app/layout.tsx

// app/layout.tsx
import '@hourworth/ui/styles.css'
import { ThemeProvider, DensityProvider } from '@hourworth/ui'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider defaultTheme="system">
          <DensityProvider defaultDensity="comfortable">
            {children}
          </DensityProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

3. Use components

Every export is tree-shakeable, controllable, and keyboard accessible.

booking-card.tsx

import { Button, Card, CardContent, FocusTimer } from '@hourworth/ui'

export function BookingCard() {
  return (
    <Card>
      <CardContent className="flex flex-col items-center gap-4">
        <FocusTimer duration={1500} defaultRemaining={1500} label="Focus" />
        <Button>Book this session</Button>
      </CardContent>
    </Card>
  )
}

Theming & density

Read and change the active theme or density anywhere with the provided hooks. Both respect system preferences and persist across reloads.

controls.tsx

import { useTheme, useDensity } from '@hourworth/ui'

function Controls() {
  const { theme, setTheme } = useTheme()      // 'light' | 'dark' | 'system'
  const { density, setDensity } = useDensity() // 'compact' | 'comfortable' | 'spacious'
  // Tokens update live across the whole tree.
}

Component index

Foundations

ThemeProviderDensityProviderContainerStackInlineGridHeadingTextSeparator

Forms

ButtonInputPasswordInputNumberInputSelectSliderCheckboxRadioGroupSwitchInputOTP

Overlays & data

DialogSheetPopoverTooltipMenuTabsAccordionCardBadgeAvatar

Time & productivity

FocusTimerPomodoroStopwatchTimeBlockGoalProgressStreakTrackerSessionCardBarChartDonutChartSparkline

Explore components