Installation

Seven steps: the source, its dependencies, two aliases, the styles, the fonts, the brand files. Then build.

1
Take the source

The kit is vendored, not published: copy zostel-showcase/packages/zostel-ui-src into your app (or keep it in the same repo).
2
Add its dependencies

React 19 and the libraries it is built on.
bash
```
npm install react react-dom class-variance-authority clsx tailwind-merge \
  @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-aspect-ratio @radix-ui/react-avatar \
  @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog \
  @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar \
  @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group \
  @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider \
  @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle \
  @radix-ui/react-toggle-group @radix-ui/react-tooltip \
  cmdk vaul react-day-picker@9 date-fns react-hook-form framer-motion lottie-web
npm install -D tailwindcss @tailwindcss/vite
```

Point the aliases at it

Two aliases — exactly how this site does it.

tsx

// vite.config.ts (or the vite block of astro.config.mjs)
import { resolve } from "path";
import tailwindcss from "@tailwindcss/vite";

export default {
  plugins: [tailwindcss()],
  resolve: {
    alias: {
      "@": resolve("./packages/zostel-ui-src"),                   // the kit's own imports (@/lib, @/components)
      "zostel-ui": resolve("./packages/zostel-ui-src/index.ts"),  // what your code imports
    },
    dedupe: ["react", "react-dom"],
  },
};

Tell TypeScript

The same paths, for editors and checks.

json

// tsconfig.json — so the editor and type checks resolve the same paths
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./packages/zostel-ui-src/*"],
      "zostel-ui": ["./packages/zostel-ui-src/index.ts"]
    }
  }
}

Import the styles and the fonts

One stylesheet (it imports Tailwind itself — don’t import it twice), then the brand fonts.

css

/* your app's CSS entry */
@import "../packages/zostel-ui-src/styles/globals.css";   /* Tailwind v4, the tokens (light + .dark), the base, the touch bands */

/* the brand fonts, served from /fonts (licences: see brand/AUDIT-2026.md) */
@font-face { font-family: "Futura"; src: url("/fonts/futura/futura-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gotham Narrow"; src: url("/fonts/gotham-narrow/gotham-narrow-book.woff2") format("woff2"); font-weight: 400; font-display: swap; }

Serve the brand files

The components load the brand’s generated files by URL. Never edit them by hand — change the generator in brand/tools and rebuild.

text

# the brand files the components draw — copy (or sync) them into your public folder
zostel-showcase/public/brand/logo       → /brand/logo       ZostelLogo, ZostelWordmark
zostel-showcase/public/brand/icons      → /brand/icons      WifiIcon, ZostelIcon…
zostel-showcase/public/brand/places     → /brand/places     PlaceIcon, place Lotties
zostel-showcase/public/brand/masters-2015 → /brand/masters-2015  TajMahalIcon, illustrations
zostel-showcase/public/brand/patterns   → /brand/patterns   PatternBackground
zostel-showcase/public/brand/motion     → /brand/motion     LottiePlayer paths
zostel-showcase/public/brand/scenes, zobu → /brand/scenes, /brand/zobu   pictures and faces

Use it

Import from "zostel-ui".

tsx

import { Button, HostelCard, WifiIcon } from "zostel-ui";

<Button>Book</Button>

On this site: the source is zostel-showcase/packages/zostel-ui-src, the aliases are in astro.config.mjs, and every page here imports from "zostel-ui".