@sineforge/ui

Shared React UI components, design tokens, and Tailwind preset used across Sineforge apps.

Installation

npm install @sineforge/ui

Required peer dependencies:

npm install react react-dom tailwindcss

Setup

1. Import styles once in your app entry CSS:

@import '@sineforge/ui/styles.css';

2. Add the Sineforge Tailwind preset:

import sineforgeTailwindPreset from '@sineforge/ui/tailwind-preset';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [sineforgeTailwindPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

3. Use components:

import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input } from '@sineforge/ui';

export function Example() {
  return (
    <Dialog>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Update profile</DialogTitle>
        </DialogHeader>
        <Input placeholder="Name" />
        <Button className="mt-3">Save</Button>
      </DialogContent>
    </Dialog>
  );
}

Exports

• Components: Button, Badge, Checkbox, CopyButton, Dialog, DropdownMenu, Input, InputField, MenuDialog, Pagination, SearchInput, Select, Switch, Tabs, Tooltip, CodeBlock
• Utilities: cn
• Styling entrypoints: @sineforge/ui/styles.css, @sineforge/ui/tailwind-preset

Theming

• Token variables are provided in styles.css.
• Dark mode is enabled by adding the dark class on a parent element.