Skip to content
ConversoKit
Get started
Widgets · 16

Themed widgets, ready to compose.

Each widget renders from --ck-* CSS variables. Drop in a theme; the entire UI follows. Click any card for a focused, shareable preview.

ProductCarouselcommerce

Aurora Headphones

$249★ 4.8

Lumen Lamp

$89★ 4.6

Pulse Speaker

$179★ 4.7

Helix Keyboard

$129★ 4.5

Horizontally scrolling product list with image, title, and price.

tsx
<ProductCarousel products={[{ id, title, price, image }]} />
ProductCardcommerce

Aurora Headphones

★ 4.8
$249

Single product card with image, title, rating and price.

tsx
<ProductCard product={{ id, title, price, rating, image }} />
AddToCartPanelcommerce
Aurora Headphones$249.00
2

Quantity selector, total, and add-to-cart CTA.

tsx
<AddToCartPanel productId={id} unitPrice={249} onAdd={callTool('set_cart')} />
CheckoutSummarycommerce
Order summary
  • Aurora Headphones× 1$249
  • Lumen Lamp× 2$178
  • Helix Keyboard× 1$129
Subtotal$556
Tax$39
Total$595

Cart summary with line items, subtotal, tax and total.

tsx
<CheckoutSummary items={cart.items} totals={cart.totals} />
AvailabilityCalendarbooking
August 2026

7-day grid showing slots with availability and a select callback.

tsx
<AvailabilityCalendar days={days} onSelect={(slot) => …} />
BookingCardbooking

Tue · Aug 13, 10:00 AM

60 min consultation · $80

Reservation confirmation card with date, time, duration, and CTA.

tsx
<BookingCard reservation={{ date, time, duration, price }} />
HotelCardtravel

Quinta do Mar

Sintra, Portugal

★ 4.6
PoolSpaSea viewBreakfast
$220/ night

Hotel listing with photo, rating, amenities, and per-night price.

tsx
<HotelCard hotel={{ name, city, rating, amenities, price }} />
FlightSummarytravel
TAP Air PortugalAug 4 · 11:20
LIS
Lisbon
8h 25m
Direct
JFK
New York
From$642

Flight details: origin → destination, duration, airline, price.

tsx
<FlightSummary flight={{ origin, destination, duration, price }} />
ItineraryTimelinetravel
  1. Day 1

    Lisbon arrival

    Lisbon, Portugal · Mon · Aug 4
  2. Day 2

    Sintra and Cabo da Roca

    Sintra · Tue · Aug 5
  3. Day 3

    Évora day trip

    Évora · Wed · Aug 6
  4. Day 4

    Departure from LIS

    Lisbon airport · Thu · Aug 7

Multi-leg trip timeline with day-by-day vertical layout.

tsx
<ItineraryTimeline legs={[{ day, title, location }]} />
KPIGriddashboard
MRR
$42.1k
+12.4%
ARR
$510k
+18.0%
NPS
67
+3
Churn
2.1%
-0.4%

Headline KPI tiles in a responsive grid.

tsx
<KPIGrid kpis={[{ label, value, delta }]} />
TrendChartdashboard
MRR · 12 weeks
$42.1k
+12%

Time-series sparkline with delta annotation.

tsx
<TrendChart points={series} delta="+12%" />
AnalyticsPaneldashboard
MRR
$42.1k
+12.4%
ARR
$510k
+18.0%
NPS
67
+3
Churn
2.1%
-0.4%
MRR · 12 weeks
$42.1k
+12%
Alerts
  • e
    Checkout 5xx spike in eu-west-1
    2m
  • w
    Stripe webhook retries above SLO
    14m
  • i
    Daily summary sent to ops
    1h

Composes KPI strip + trend chart + alerts in a single panel.

tsx
<AnalyticsPanel data={getAnalyticsPanel()} />
AlertFeeddashboard
Alerts
  • e
    Checkout 5xx spike in eu-west-1
    2m
  • w
    Stripe webhook retries above SLO
    14m
  • i
    Daily summary sent to ops
    1h

Operational alert list with severity icons and timestamps.

tsx
<AlertFeed alerts={[{ severity, message, ts }]} />
MultiStepFormlead-gen
1
2
3
Step 2 of 3

Tell us about your team

Stage: Series A
Team size: 10–25

Multi-step form with progress bar and step navigation.

tsx
<MultiStepForm steps={steps} onSubmit={callTool('submit_lead')} />
LeadCaptureFormlead-gen

Get a personalized demo

We'll reach out within one business day.

Single-step lead form with name, email, and company.

tsx
<LeadCaptureForm onSubmit={callTool('submit_lead')} />
ConsentBannerconsent

We use analytics

We collect anonymized usage to improve the experience. You can opt out anytime.

Per-scope consent banner. Required when tools touch personal data.

tsx
<ConsentBanner scopes={['personal_data', 'analytics']} />