@optilogic/core

Core UI components for opti-ui - A professional React component library built with Tailwind CSS and Radix UI primitives.

Installation

npm install @optilogic/core

Peer Dependencies

Install the required peer dependencies:

npm install react react-dom tailwindcss

Optional peer dependencies for specific components:

# DataGrid virtualization
npm install @tanstack/react-virtual

# DatePicker
npm install date-fns react-day-picker

# Toaster notifications
npm install sonner

Setup

1. Configure Tailwind CSS

Add the opti-ui preset to your Tailwind configuration:

// tailwind.config.js
import { optiUiPreset } from '@optilogic/core/tailwind-preset';

export default {
  presets: [optiUiPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@optilogic/core/dist/**/*.{js,mjs}',
  ],
};

2. Import Styles

Import the base styles in your app's entry point:

import '@optilogic/core/styles.css';

Or define the CSS variables yourself using the reference in the styles.css file.

Usage

import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@optilogic/core';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Enter your name" />
        <Button variant="primary">Submit</Button>
      </CardContent>
    </Card>
  );
}

Components

Primitives

• Button, Input, Label, Textarea
• Badge, Checkbox, Switch
• Progress, Separator, Skeleton

Radix-based

• Select, Tabs, Accordion
• Tooltip, Popover, DropdownMenu
• AlertDialog

Layout

• Card, Table, Modal
• ResizablePanel, ResizeHandle

Data

• DataGrid (with virtualization)
• Autocomplete

Feedback

• Chip, LoadingSpinner, Toaster
• ConfirmationModal

Utility

• IconButton, CopyButton, ContextMenu

License

MIT