ui-arreya-components

Shared UI components and design system for Arreya applications.

Installation

npm install ui-arreya-components

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom next-themes

Usage

1. Import Styles

The package includes a pre-compiled CSS file with all design tokens (CSS variables) and Tailwind utilities needed for the components.

In your global CSS file:

@import 'ui-arreya-components/styles.css';

Or in your root layout/app entry:

import 'ui-arreya-components/styles.css';

2. Import Components

import { Button, Card, Dialog, Input } from 'ui-arreya-components';

export function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter text..." />
      <Button>Submit</Button>
    </Card>
  );
}

Available Components

• AlertDialog
• Alert
• Avatar
• Badge
• Breadcrumb
• Button
• Calendar
• Card
• Checkbox
• Command
• Dialog
• Drawer
• DropdownMenu
• Form
• Input
• Label
• Popover
• Progress
• RadioGroup
• ScrollArea
• Select
• Separator
• Sheet
• Sidebar
• Skeleton
• Slider
• Sonner (toast notifications)
• Switch
• Table
• Tabs
• Tooltip

Utilities & Hooks

import { cn, useMobile } from 'ui-arreya-components';

// cn - className utility for merging Tailwind classes
<div className={cn('base-class', condition && 'conditional-class')} />

// useMobile - hook to detect mobile viewport
const isMobile = useMobile();

Tailwind Configuration (Optional)

If you want to extend or customize the design system, you can import the Tailwind config:

// tailwind.config.js
import sharedConfig from 'ui-arreya-components/tailwind.config';

export default {
  ...sharedConfig,
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/ui-arreya-components/dist/**/*.{js,mjs}',
  ],
  // Add your customizations here
};

Theming

The components support light and dark modes via CSS variables. Toggle between themes using the next-themes package:

import { useTheme } from 'next-themes';

const { theme, setTheme } = useTheme();
setTheme('dark'); // or 'light'

CSS Variables

The design system uses these CSS variables that you can override:

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: #5c166a;
  --primary-foreground: #ffffff;
  --secondary: 0 0% 96.1%;
  --muted: 0 0% 96.1%;
  --accent: 0 0% 96.1%;
  --destructive: 0 84.2% 60.2%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;
  --button-primary: #ffaa00;
  --button-secondary: #00a599;
  /* ... and more */
}

Development

Building

Build the package (compiles TypeScript and generates CSS):

cd packages/ui-components
npm run build

This generates:

• dist/index.js and dist/index.mjs — compiled components
• dist/index.d.ts — TypeScript declarations
• dist/styles.css — compiled CSS with design tokens and Tailwind utilities

Publishing a New Version

1. Make your changes to components, styles, or config

2. Build the package

   npm run build

3. Bump version and publish

   npm run publish:patch   # bug fixes (0.1.10 → 0.1.11)
   npm run publish:minor   # new features (0.1.10 → 0.2.0)
   npm run publish:major   # breaking changes (0.1.10 → 1.0.0)

4. Commit and push the version change

   git add packages/ui-components/package.json
   git commit -m "chore: bump ui-arreya-components to vX.X.X"
   git push

5. Update consuming projects

   npm update ui-arreya-components

Available Scripts

| Script | Description | |--------|-------------| | npm run build | Build components and CSS | | npm run build:css | Build CSS only | | npm run dev | Watch mode for components | | npm run dev:css | Watch mode for CSS | | npm run typecheck | Type check without emitting | | npm run publish:patch | Bump patch version and publish | | npm run publish:minor | Bump minor version and publish | | npm run publish:major | Bump major version and publish |

License

MIT