@nixopus/ui

@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 4.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 Types

import type { ButtonProps, CardProps } from '@nixopus/ui';

const buttonProps: ButtonProps = {
  variant: 'default',
  children: 'Click me'
};

Components

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.

Styling

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

Tailwind CSS v4 Configuration

For Tailwind CSS v4, add the following to your main CSS file (e.g., globals.css):

@import 'tailwindcss';

/* Scan the nixopus-ui source files for classes */
@source "../../packages/nixopus-ui/src/**/*.{ts,tsx}";
/* OR if installed via npm: */
/* @source "node_modules/@nixopus/ui/src/**/*.{ts,tsx}"; */

@plugin "tailwindcss-animate";

Important: For Tailwind v4, you need to scan the source files (src/**/*.{ts,tsx}) of this package, not the built dist files, so that Tailwind can properly detect all utility classes used in the components.

PostCSS Configuration

Ensure you have PostCSS configured with the Tailwind plugin:

// postcss.config.mjs
const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default 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. See billing-view/app/globals.css for a complete example of CSS variable definitions.

TypeScript Support

This package includes full TypeScript support with exported types:

Importing Types

You can import types from the main entry point:

import type {
  ButtonProps,
  CardProps,
  InputProps,
  // ... 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 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