@teja-app/ui

Shared UI component library for Teja applications.

Installation

``bash
bun add @teja-app/ui
`

Setup

$3

`ts
// 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
},
},
};
`

$3

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

function App() {
return (

Click me

);
}
`

Component Design Philosophy

All components follow these principles:

$3

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

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

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

$3

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

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

`

$3

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

`tsx
// Compose with children


Save


// Override with className

Custom Color

`

$3

`tsx
// Slot pattern for complex components

Title
Content

Cancel
Save



// Polymorphic components

Link Button

`

Customization

$3

Each app can extend the preset and override specific tokens:

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

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

$3

Access individual tokens for custom configurations:

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

API Reference

$3

| 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 |

$3

| 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.