@nixopus/ui

Nixopus UI component library - Pure React components for building Nixopus applications.

Installation

npm install @nixopus/ui
# or
yarn add @nixopus/ui
# or
pnpm add @nixopus/ui

Requirements

• React 18+ or 19+
• React DOM 18+ or 19+
• Tailwind CSS 3.0+
• Required peer dependencies (see package.json)

Usage

Basic Usage

import { Button, Card, Input } from '@nixopus/ui';

function App() {
  return (
    <Card>
      <Input placeholder="Enter text" />
      <Button>Click me</Button>
    </Card>
  );
}

Using Composed Components

import { CardWrapper, DialogWrapper, FormInputField } from '@nixopus/ui';

function MyComponent() {
  return (
    <CardWrapper title="My Card" description="Card description">
      <FormInputField form={form} label="Name" name="name" />
    </CardWrapper>
  );
}

Using Types

import type { CardWrapperProps, DialogAction } from '@nixopus/ui';

const cardProps: CardWrapperProps = {
  title: 'My Card',
  children: <div>Content</div>
};

Components

Pure Components

This package includes all pure UI components from the Nixopus design system:

• Form components: Input, Select, Checkbox, Form, Textarea, etc.
• Layout components: Card, Dialog, Sheet, Separator, etc.
• Data display: Table, Chart, Badge, Avatar, etc.
• Navigation: Breadcrumb, Pagination, Tabs, etc.
• Feedback: Alert, Loading, Toast (Sonner), etc.
• Overlays: Dropdown Menu, Context Menu, Tooltip, etc.

Composed Components

Higher-level components built from base components:

• Wrappers: CardWrapper, DialogWrapper, SelectWrapper, TabsWrapper
• Form Fields: FormInputField, FormSelectField, PasswordInputField
• Headers: MainPageHeader, SubPageHeader
• Charts: BarChartComponent, DoughnutChartComponent
• Data Display: DataTable, EmptyState, DraggableGrid
• Utilities: SearchBar, SortSelector, LabelFilter, UploadAvatar

Styling

This package uses Tailwind CSS. Make sure you have Tailwind configured in your project and include the necessary CSS variables for theming.

Tailwind Configuration

Add the following to your tailwind.config.js:

module.exports = {
  content: [
    './node_modules/@nixopus/ui/dist/**/*.{js,jsx,ts,tsx}',
    // ... your other content paths
  ],
  // ... rest of your config
}

CSS Variables

Ensure your CSS includes the necessary CSS variables for theming. The components use CSS variables for colors, spacing, and other design tokens.

TypeScript Support

This package includes full TypeScript support with exported types:

Importing Types

You can import types from the main entry point:

import type {
  CardWrapperProps,
  DialogAction,
  TableColumn,
  DataTableProps,
  // ... and more
} from '@nixopus/ui';

Granular Type Imports

For better tree-shaking and organization, you can import types from specific paths:

// Import component types only
import type {
  ChartConfig,
  CarouselApi,
  BannerProps,
  BadgeGroupProps
} from '@nixopus/ui/types/components';

// Import composition types only
import type {
  CardWrapperProps,
  DialogAction,
  DataTableProps,
  TableColumn
} from '@nixopus/ui/types/compositions';

// Import all types
import type { /* all types */ } from '@nixopus/ui/types';

Tree Shaking

This package is tree-shakeable. Import only what you need:

// Good - tree-shakeable
import { Button } from '@nixopus/ui';

// Avoid - imports everything
import * as UI from '@nixopus/ui';

License

Fair-Code Sustainable Use License