@hiver/hot-ui

Hiver HOT Design System — 30 React components built directly from Figma.

Install

npm install @hiver/hot-ui

Setup

1. Add the CSS tokens to your app root:

// app/layout.tsx (Next.js) or src/main.tsx (Vite)
import "@hiver/hot-ui/globals.css"

2. Add the Tailwind config:

// tailwind.config.ts
import hotConfig from "@hiver/hot-ui/tailwind.config"
import { mergeConfig } from "@hiver/hot-ui/tailwind.config"

export default {
  ...hotConfig,
  content: [
    ...hotConfig.content,
    "./src/**/*.{ts,tsx}",
  ],
}

3. Use components:

import { Button, Input, Table, Badge, Icon } from "@hiver/hot-ui"

export function AccountsPage() {
  return (
    <div>
      <Button variant="primary" leftIcon="compose">New conversation</Button>
      <Input placeholder="Search accounts…" leftIcon="search" />
    </div>
  )
}

All components

See the full README for all 30 components and the complete API.