@archpublicwebsite/components

Reusable Vue 3 UI components for Archipelago hotel websites.

Overview

@archpublicwebsite/components groups the UI primitives shared across Archipelago's public web experience: booking, branding, hotel/promo cards, media and galleries, navigation, settings, modal-content containers, and a large icon set. Import from the package root for convenience, or from a category subpath for a smaller bundle.

Features

• Vue 3 components with full TypeScript support
• Root entry plus category-based subpath exports for tree-shaking
• Shared composables for theme and brand state
• A large icon library grouped by purpose
• Works in Vue 3 and Nuxt 3

Installation

pnpm add @archpublicwebsite/components vue dayjs @vueuse/core swiper \
  @archpublicwebsite/modal @archpublicwebsite/rangepicker

Install only the peer dependencies used by the components you actually import.

Nuxt 3

CSS loads automatically as soon as you import anything from this package — no manual CSS entry or alias needed.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@archpublicwebsite/components/nuxt'],
})

The module wires build.transpile / vite.ssr.noExternal / nitro.externals.inline for SSR so you don't have to configure them by hand.

Quick start

Import from the root when combining several pieces:

<script setup lang="ts">
import { BookingBar, HotelCard, ThemeToggle } from '@archpublicwebsite/components'
</script>

<template>
  <BookingBar />
  <HotelCard />
  <ThemeToggle compact />
</template>

Or import from a category subpath for a smaller bundle:

import { BookingBar } from '@archpublicwebsite/components/booking'
import { HotelCard } from '@archpublicwebsite/components/cards'
import { BackToTop } from '@archpublicwebsite/components/navigation'
import { ThemeToggle } from '@archpublicwebsite/components/settings'

Public API

| Category | Exports | | --- | --- | | Booking | BookingBar | | Branding | BrandStrip, Eyebrow | | Cards | HotelCard, PersonalizeCard | | Containment | ModalContentPreview, modal dialog components (Gallery, Offers, Splash, Form, and Google Maps/iframe/PDF/Video previews) | | Media | Gallery components and types, image components | | Navigation | BackToTop, SearchPalette, SearchTrigger | | Settings | BrandCustomizer, ThemeToggle | | Icons | A large set of I* icon components (arrows, general UI, media, navigation, social, utility) |

Composables

• useTheme() — returns the active theme state and helpers to set or toggle it.
• useBranding() — returns the shared brand colors and helpers to update or reset them.

Usage

Theme switching

<script setup lang="ts">
import { ThemeToggle, useTheme } from '@archpublicwebsite/components'

const { theme, set } = useTheme()
</script>

<template>
  <ThemeToggle compact />
  <p>Current theme: {{ theme }}</p>
  <button type="button" @click="set('dark')">
    Force dark mode
  </button>
</template>

Branding controls

<script setup lang="ts">
import { BrandCustomizer, useBranding } from '@archpublicwebsite/components'

const { brand, setColors, resetColors } = useBranding()
</script>

<template>
  <BrandCustomizer />
  <p>Primary: {{ brand.primary }} Secondary: {{ brand.secondary }}</p>
  <button type="button" @click="setColors({ primary: '#16A34A', secondary: '#00215B' })">
    Set brand colors
  </button>
  <button type="button" @click="resetColors">
    Reset colors
  </button>
</template>

Booking bar

<script setup lang="ts">
import { ref } from 'vue'
import { BookingBar, type BookingBarValue } from '@archpublicwebsite/components'

const booking = ref<BookingBarValue>({
  destination: 'Bali',
  range: '01 Jan 2026 - 03 Jan 2026',
  guests: '1 Room · 2 Guests',
})
</script>

<template>
  <BookingBar :model-value="booking" @submit="() => null" />
</template>

Icons

<script setup lang="ts">
import { IArrowRight, ISearch } from '@archpublicwebsite/components'
</script>

<template>
  <button type="button">
    <ISearch /> Search
  </button>
</template>

Development

pnpm install
pnpm build
pnpm typecheck
pnpm lint

Contributing

See the root README for contribution guidelines.

License

MIT