Components

The component system is built with shadcn/ui, powered by Radix UI primitives and Tailwind CSS 4 for styling.
All components are fully typed, accessible (ARIA compliant), and theme-aware using CVA (Class Variance Authority).

Folder Overview

Core Components (/ui)

These are the foundation of the design system — built on shadcn/ui, styled with Tailwind, and driven by Radix behavior (focus traps, keyboard nav, aria attributes).

Common components:

• button.tsx — Primary button with variants and sizes (CVA-based).
• input.tsx, textarea.tsx, form.tsx — Form controls with validation-ready classes.
• select.tsx, checkbox.tsx, switch.tsx — Wrapped Radix primitives with theme variants.
• dialog.tsx, sheet.tsx, tooltip.tsx — Accessible overlay and popup elements.
• tabs.tsx, accordion.tsx, timeline.tsx, table.tsx — Structured layout utilities.
• sidebar.tsx — App sidebar component integrated with layout provider.
• carousel.tsx — Custom Embla-based carousel component.

import { Button } from "@/components/ui/button"
 
<Button variant="default" size="lg">
  Book Trip
</Button>

Custom Components (/custom)

Feature-specific or composite UI blocks combining primitives and app logic.

Highlights:

• app-layout-content-header.tsx, app-sidebar.tsx — App shell elements.
• banner.tsx — Dismissible global announcement banner.
• chat-container.tsx, prompt-input-area.tsx — Used in the AI Chat module.
• custom-card.tsx, explore-card.tsx, hotel-card.tsx, flight-card.tsx, saved-card.tsx — Cards for travel content and saved items.
• custom-drawer.tsx, modal.tsx — Reusable overlay components.
• footer.tsx, navbar.tsx, divider.tsx, content-header.tsx — Structural UI pieces.
• information-card.tsx, information-header.tsx — Used on booking and profile screens.
• stack-images.tsx, tag.tsx — Decorative and compact UI components.

import { ExploreCard } from "@/components/custom/explore-card"
 
<ExploreCard
  title="Bali, Indonesia"
  description="Discover beaches, temples, and local markets"
  subText="7-day itinerary available"
  image="/images/bali.jpg"
  iconSymbol={<Plane className="size-3.5" />}
  delay={0.1}
/>

Magic UI (/magicui)

Animated, decorative, and text-based motion effects — ideal for marketing sections or headers.

• blur-fade.tsx — Smooth blur-in animation.
• shine-border.tsx — Gradient border highlight effect.
• sparkles-text.tsx — Text animation with sparkles.
• text-animate.tsx — Sequential text reveal animation.

import { TextAnimate } from "@/components/magicui/text-animate"
 
<TextAnimate text="Smarter travel experiences with AI ✈️" />

Lightbox

Integrated 3rd-party libraries for advanced UI experiences:

• Lightbox: react-photo-view 

import { PhotoProvider, PhotoView } from "react-photo-view"
 
<PhotoProvider>
  <PhotoView src="/screens/explore.png">
    <img src="/screens/explore.png" alt="Explore screen" />
  </PhotoView>
</PhotoProvider>

Theming (mode-theme.tsx)

Uses shadcn’s theme context built on Radix system colors. Handles light/dark mode switching and syncs with user preference.

import { ModeTheme } from "@/components/mode-theme"
 
<ModeTheme />

All UI elements automatically react to data-theme attributes — no extra configuration required.

Extending Components

You can easily extend or override any component:

• Add new variants using CVA pattern.
• Wrap shadcn/ui components with project-specific logic.
• Keep /ui/ minimal and stable for future updates.
• Create /components/overrides/ if you want brand-specific versions.

💡 Tip: To generate new shadcn components, run npx shadcn@latest add [component-name]