UI & Design

Overview

The UI for the Marketplace App is built with Tailwind CSS and ShadCN UI. The design system is clean, component-driven, and optimized for customization and scalability. It’s designed to provide a consistent user experience across listing creation, discovery, booking, messaging, and authentication flows.

Figma Design

You can access the full design system, screen flows, and components via the official Figma file:

👉 Figma: Marketplace App UI Design

This includes:

Typography and color palette
UI components (buttons, inputs, forms)
Page layouts (home, listing, booking, inbox)
Mobile and desktop breakpoints
Multi-step listing creation wizard
Modal and dialog designs

Technologies Used

Tailwind CSS: Utility-first styling with custom theme extensions
ShadCN UI: Component framework based on Radix UI primitives with Tailwind integration
Lucide Icons: Consistent, open-source icon set
Next.js App Router: For routing and layout composition
Framer Motion: For animations and transitions

Component Guidelines

Button

Variants: default, outline, ghost, destructive
Sizes: sm, md, lg, icon

<Button variant="default" size="md">
  Continue
</Button>

Input & Textarea

Uses Label, Input, and Textarea components from ShadCN
Fully integrated with react-hook-form validation
Accessible and responsive

Dialogs are used for confirmation (e.g. Send Quote)
Modals are used for onboarding and walkthroughs

Stepper

Used in listing creation
Current step and progress is derived from Zustand store

Accessibility

All components follow WAI-ARIA standards via Radix UI
Keyboard navigation is fully supported
Screen reader-friendly labels and roles are included

Theming

The app supports light and dark modes using Tailwind’s dark: variant and prefers system theme.

theme: {
  extend: {
    colors: {
      primary: 'hsl(var(--primary))',
    }
  }
}

Customization Tips

Extend ShadCN components by creating wrappers in components/ui/
For branding, override Tailwind tokens via tailwind.config.ts
Use class-variance-authority for composable classNames in components

UI & Design

On this page