@konversi-sdk/ui

The official UI component library for the Konversi One platform. Built with React 19, Base UI (@base-ui/react), Tailwind CSS v4, and Shadcn UI design system principles.

Features

• 🎨 Modern Design System: Styled using OKLCH color space variables for vibrant light & dark modes.
• ⚡ Tailwind CSS v4 Native: Leverages Tailwind v4 @theme inline tokens, @source scanning, and CSS custom properties.
• 🧩 Base UI Primitives: Built on @base-ui/react unstyled accessibility primitives.
• 📦 Tree-shakable & Modular: Exported as ES modules with TypeScript declaration support.

Installation

Install @konversi-sdk/ui along with its required peer dependencies:

# pnpm
pnpm add @konversi-sdk/ui

# npm
npm install @konversi-sdk/ui

# yarn
yarn add @konversi-sdk/ui

Peer Dependencies

Ensure your host project has react and react-dom installed:

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  }
}

Setup & Stylesheet Integration

To ensure correct styling and avoid CSS specificity/reset conflicts, choose one of the following integration methods:

Option 1: Tailwind CSS v4 Integration (Recommended)

If your host React application uses Tailwind CSS v4 (via @tailwindcss/vite or @tailwindcss/cli), import the UI library's source stylesheet directly into your host src/index.css:

/* src/index.css */
@import "@konversi-sdk/ui/css";

/* Your host application styles */

Why this is recommended: This merges @konversi-sdk/ui styling, OKLCH design tokens, and host utility classes into a single unified Tailwind compilation pass, eliminating double-preflight CSS resets and styling conflicts.

Option 2: Pre-compiled CSS (For Non-Tailwind v4 Host Apps)

If your project does not compile Tailwind CSS v4, import the pre-built CSS stylesheet in your main entry file (main.tsx or App.tsx):

import "@konversi-sdk/ui/style.css";

or link it directly in your index.html:

<link rel="stylesheet" href="node_modules/@konversi-sdk/ui/dist/konversi-one-ui.css" />

Usage Example

Import components directly from @konversi-sdk/ui:

import React, { useState } from "react";
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  Badge,
} from "@konversi-sdk/ui";

export function AccountOverview() {
  const [open, setOpen] = useState(false);

  return (
    <Card className="max-w-md">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>Account Overview</CardTitle>
          <Badge variant="default">Active</Badge>
        </div>
        <CardDescription>Manage your workspace settings and preferences.</CardDescription>
      </CardHeader>

      <CardContent>
        <p className="text-sm text-muted-foreground">
          Enterprise Plan &mdash; 12 / 20 Seats Used.
        </p>
      </CardContent>

      <CardFooter className="justify-between">
        <Button variant="outline" size="sm">Cancel</Button>

        <Dialog open={open} onOpenChange={setOpen}>
          <DialogTrigger render={<Button size="sm">Edit Profile</Button>} />
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Edit Profile</DialogTitle>
            </DialogHeader>
            <div className="py-2 text-sm">
              Make changes to your profile here.
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setOpen(false)}>Close</Button>
              <Button onClick={() => setOpen(false)}>Save Changes</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </CardFooter>
    </Card>
  );
}

Available Components

All components are exported from the main entry point:

| Component Category | Exported Components | | :--- | :--- | | Buttons & Badges | Button, buttonVariants, Badge, badgeVariants | | Form Controls | Input, Textarea, Checkbox, Switch, RadioGroup, Label, Field, InputGroup | | Select & Combobox | Select, Combobox | | Modals & Overlays | Dialog, Sheet, AlertDialog, Popover, Tooltip, DropdownMenu | | Data & Display | Card, Table, Tabs, Accordion, Collapsible, Breadcrumb, Calendar, Separator | | Feedback & Loaders| Toast, Skeleton, Spinner |

Dark Mode Support

Dark mode support is built-in via the .dark CSS selector. Toggle dark mode by adding or removing the .dark class on the <html> or <body> element:

// Enable Dark Mode
document.documentElement.classList.add("dark");

// Enable Light Mode
document.documentElement.classList.remove("dark");

Development

# Start development environment
npm run dev

# Build UI library & export CSS
npm run build

# Typecheck TypeScript
npm run typecheck

# Lint files
npm run lint

License

Private / Proprietary to Konversi One.