> ## Documentation Index
> Fetch the complete documentation index at: https://docs.boxpressd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components Overview

> Explore the UI components available in the Boxpressd Sites SDK.

The Boxpressd Sites SDK includes a growing collection of production-ready components designed specifically for cigar lounges, cigar brands, and other businesses within the Boxpressd ecosystem.

All components automatically use the business context resolved by the `BoxpressdProvider`, allowing you to focus on building your website instead of managing API requests and business identifiers.

## Component Categories

The SDK currently provides components in the following categories:

* Events
* Reviews
* Check-ins
* Sessions
* Maps
* Compliance
* UI Elements

## Events

Event components help businesses showcase upcoming and past events.

### Available Components

| Component | Description |
| - | - |
| `BoxpressdEventCard` | Displays a single event. |
| `BoxpressdEventListItem` | Compact event list item. |
| `BoxpressdEventList` | Displays multiple events. |
| `BoxpressdEventCalendar` | Calendar view of events. |
| `EventDetailsModal` | Event detail modal with actions. |

### Example

```tsx id="xd0zxa" theme={null}
import { BoxpressdEventList } from "@boxpressd/sites-sdk/events"

export default function UpcomingEvents() {
  return (
    <BoxpressdEventList
      status="upcoming"
      limit={6}
    />
  )
}
```

## Reviews

Review components help businesses display ratings and customer feedback.

### Available Components

| Component | Description |
| - | - |
| `BoxpressdReviewSummary` | Displays review statistics and average ratings. |
| `BoxpressdRatingBadge` | Compact rating display. |

### Example

```tsx id="sjkgt6" theme={null}
import { BoxpressdReviewSummary } from "@boxpressd/sites-sdk/reviews"

export default function ReviewsSection() {
  return <BoxpressdReviewSummary />
}
```

## Check-ins

Check-in components display recent customer activity.

### Available Components

| Component | Description |
| - | - |
| `BoxpressdCheckinsFeed` | Displays recent venue check-ins. |
| `BoxpressdCheckinCard` | Displays an individual check-in. |

### Example

```tsx id="mwj23h" theme={null}
import { BoxpressdCheckinsFeed } from "@boxpressd/sites-sdk/checkins"

export default function ActivitySection() {
  return (
    <BoxpressdCheckinsFeed
      limit={10}
    />
  )
}
```

## Sessions

Session components display smoking activity associated with a venue or brand.

### Available Components

| Component | Description |
| - | - |
| `BoxpressdSessionsFeed` | Displays recent smoke sessions. |
| `BoxpressdSessionCard` | Displays a single session. |

### Example

```tsx id="77xqci" theme={null}
import { BoxpressdSessionsFeed } from "@boxpressd/sites-sdk/sessions"

export default function CommunitySection() {
  return (
    <BoxpressdSessionsFeed
      limit={10}
    />
  )
}
```

## Maps

Map components help customers locate lounges, retailers, and event venues.

### Available Components

| Component | Description |
| - | - |
| `BoxpressdMap` | Interactive map component. |

### Example

```tsx id="e11h5s" theme={null}
import { BoxpressdMap } from "@boxpressd/sites-sdk/maps"

export default function LocationSection() {
  return (
    <BoxpressdMap
      height={500}
    />
  )
}
```

The map component automatically resolves the business location when available.

## Compliance

Compliance components help businesses satisfy age verification requirements.

### Available Components

| Component | Description |
| - | - |
| `AgeVerification` | Age verification modal. |

### Example

```tsx id="mjk31j" theme={null}
import { AgeVerification } from "@boxpressd/sites-sdk/compliance"

export default function Layout() {
  return (
    <>
      <AgeVerification />
      {children}
    </>
  )
}
```

The component remembers previously verified visitors using local storage.

## Core UI Components

The SDK includes reusable UI building blocks that can be used throughout your website.

### Available Components

| Component | Description |
| - | - |
| `BoxpressdButton` | Styled button component. |
| `BoxpressdCard` | Base card component. |
| `BoxpressdBadge` | Status and label badges. |
| `BoxpressdRatingBadge` | Compact rating display. |
| `BoxpressdStrengthDots` | Strength indicator for cigars. |

### Example

```tsx id="hzux3x" theme={null}
import {
  BoxpressdButton,
  BoxpressdCard,
  BoxpressdBadge
} from "@boxpressd/sites-sdk"

export default function Example() {
  return (
    <BoxpressdCard>
      <BoxpressdBadge>
        Featured
      </BoxpressdBadge>

      <BoxpressdButton>
        Learn More
      </BoxpressdButton>
    </BoxpressdCard>
  )
}
```

## Business Awareness

Many components automatically adapt to the resolved business type.

For example:

| Component | Venue | Brand |
| - | - | - |
| Events | ✓ | ✓ |
| Reviews | ✓ | ✓ |
| Sessions | ✓ | ✓ |
| Check-ins | ✓ | Limited |
| Maps | ✓ | Optional |

This allows a single component to work across multiple Boxpressd business categories.

## Theming Support

All components support Boxpressd theme variables.

```css id="6r0vud" theme={null}
:root {
  --bxp-primary: #d3a966;
  --bxp-border-radius: 16px;
}
```

You can also configure theme values through the provider.

```tsx id="b54kqg" theme={null}
<BoxpressdProvider
  apiKey={apiKey}
  theme={{
    primaryColor: "#d3a966"
  }}
>
  {children}
</BoxpressdProvider>
```

## Server and Client Support

Most SDK functionality can be used in both server and client environments.

| Feature | Server | Client |
| - | - | - |
| Data Fetching Helpers | ✓ | ✓ |
| React Hooks | — | ✓ |
| Components | ✓ | ✓ |
| Provider | ✓ | ✓ |

When possible, prefer server-side data fetching for improved SEO and performance.

## Roadmap

Additional components planned for future releases include:

* Featured cigar widgets
* Humidor inventory components
* Retail product displays
* Review feeds
* Social activity feeds
* Membership components
* Loyalty and rewards widgets
* Event ticketing integrations
* Business profile components

## Next Steps

Now that you're familiar with the available components, continue to:

* Events
* Reviews
* Maps
* Data Fetching

Each component category includes detailed examples, props, and implementation guides.