@exotic-holidays/ui

EHI Travel Platform design system (AceUI). Shared base components, theme tokens, and helpers consumed by every portal app (Hotelier, Agent, Back Office).

Install (within the monorepo)

Already linked via npm workspaces. In a portal app's package.json:

"dependencies": { "@exotic-holidays/ui": "*" }

And in the app's next.config.ts:

const nextConfig = { transpilePackages: ["@exotic-holidays/ui"] };

Usage

// app/globals.css
@import "tailwindcss";
@import "@exotic-holidays/ui/theme.css";

// any component / page
import { Button, Input, Card, Table, ListPage } from "@exotic-holidays/ui";

What's inside

| Path | Contents | |---|---| | src/theme.css | AceUI @theme tokens + .dark scope (teal primary, semantic surface/foreground/border ramps) | | src/base-components/ | Button, Input, Select, Card, Modal, Badge, Table (+TLoader), Pagination, PopConfirm, EmptyState, SearchableSelect, Checkbox, ChipInput, Dropdown, Divider, ButtonGroup, Accordion, Toaster, ThemeProvider | | src/components/ListPage.tsx | Standardized index/list page scaffold (header + search + filter button + table slot + pagination) | | src/helpers/ | cn (clsx + tailwind-merge), bem |

Rules

• Never use raw Tailwind palette colours (bg-slate-800, bg-[#0c1220]) — only semantic tokens (surface-*, foreground-*, border-*, primary/success/warning/danger).
• Invertible accents (work in light + dark): tints bg-{c}-50 / text-{c}-700 / border-{c}-200; solids bg-{c}-500 / text-{c}-foreground.
• Components are client components ("use client"); apps must list @exotic-holidays/ui in transpilePackages.