@teja-app/ui

Shared UI component library for Teja applications.

Installation

bun add @teja-app/ui

Setup

1. Configure Tailwind

// tailwind.config.js
import tejaPreset from '@teja-app/ui/tailwind';

export default {
  presets: [tejaPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@teja-app/ui/dist/**/*.{js,mjs}",
  ],
  theme: {
    extend: {
      // App-specific overrides
    },
  },
};

2. Use Components

import { Button, Input, Modal } from '@teja-app/ui';
import { cn } from '@teja-app/ui/utils';

function App() {
  return (
    <Button variant="primary" size="md">
      Click me
    </Button>
  );
}

Component Design Philosophy

All components follow these principles:

1. Modularity

Each component is self-contained with its own styles, types, and logic. No hidden dependencies between components. Import individually or as a bundle.

// Individual import
import { Button } from '@teja-app/ui';

// Bundle import
import { Button, Input, Modal } from '@teja-app/ui';

2. Extensibility

All components accept standard HTML attributes via spread props, support className for style overrides, and use forwardRef for DOM access.

<Button
  className="my-custom-class"
  data-testid="submit-btn"
  aria-label="Submit form"
  {...otherProps}
>
  Submit
</Button>

3. Loose Coupling

Components use composition over inheritance. No hard-coded values - everything is configurable via props or Tailwind classes.

// Compose with children
<Button>
  <Icon name="save" />
  Save
</Button>

// Override with className
<Button className="bg-purple-500 hover:bg-purple-600">
  Custom Color
</Button>

4. Composition Patterns

// Slot pattern for complex components
<Modal>
  <Modal.Header>Title</Modal.Header>
  <Modal.Body>Content</Modal.Body>
  <Modal.Footer>
    <Button variant="ghost">Cancel</Button>
    <Button variant="primary">Save</Button>
  </Modal.Footer>
</Modal>

// Polymorphic components
<Button as="a" href="/link">
  Link Button
</Button>

Customization

Tailwind Preset Override

Each app can extend the preset and override specific tokens:

// tailwind.config.js
import tejaPreset from '@teja-app/ui/tailwind';

export default {
  presets: [tejaPreset],
  theme: {
    extend: {
      colors: {
        brand: {
          primary: '#0ea5e9', // Override for portal
        },
      },
    },
  },
};

Design Tokens

Access individual tokens for custom configurations:

import { colors, fontFamily, spacing } from '@teja-app/ui/tailwind';

API Reference

Button

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'ghost' \| 'danger' | 'primary' | Visual style | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | loading | boolean | false | Show loading spinner | | disabled | boolean | false | Disable button | | className | string | - | Additional CSS classes |

Input

| Prop | Type | Default | Description | |------|------|---------|-------------| | error | string | - | Error message | | label | string | - | Input label | | className | string | - | Additional CSS classes |

Contributing

See CONTRIBUTING.md for guidelines on adding new components.