FAQ

General

What is the Booking Kit?

A production-ready booking and scheduling frontend with 39 screens built with Next.js 16, React 19, Tailwind CSS 4, and shadcn/ui. It covers public booking flows, calendar management, event types, team availability, analytics, workflows, and settings.

Does it include a backend?

No. The Booking Kit is a frontend UI kit. All screens use mock seed data from data/seed.ts. You connect your own backend, API, database, and authentication provider. The UI layer handles display, interaction, and form structure.

What makes this different from Calendly or Cal.com?

This is a code-first template. You own the source code, can customize everything, and integrate with any backend. No vendor lock-in, no monthly per-user fees, no limitations on branding or functionality. You get the complete scheduling UI as a starting point.

Customization

Can I customize the design?

Yes. The entire visual identity is controlled by design tokens in app/globals.css. Change the primary hue to rebrand every screen. Swap fonts in app/layout.tsx. Adjust the border radius. See the Customization guide for details.

Is it responsive?

Yes. All 39 screens are responsive from mobile to desktop. The admin layout uses a collapsible sidebar that converts to a sheet drawer on mobile. Tables scroll horizontally on narrow viewports. The public booking flow stacks vertically on mobile.

Does it support dark mode?

Yes. Light and dark mode are built in with token-driven theming. The ThemeToggle component switches between modes, and the system preference is respected by default via next-themes.

Technical

How do I connect a real calendar API?

The calendar views, availability editors, and booking data are decoupled from any backend. Replace the seed data imports with API calls to Google Calendar, Microsoft Outlook, Cal.com, or your own backend:

// Replace seed import with your API
const events = await fetch("/api/calendar/events").then(r => r.json())

The integrations settings screen (/settings/integrations) provides the UI for managing calendar sync connections.

Does the booking flow handle real payments?

The payment UI is fully built with a summary card, card input fields, coupon code entry, and deposit vs full payment options. You connect your own payment provider (Stripe, PayPal, Square) for actual transaction processing. See the Customization guide for integration examples.

What Node.js version do I need?

Node.js 18.17 or later. The kit uses Next.js 16 with React 19, which requires Node 18+.

Can I use npm instead of pnpm?

Yes. The kit works with npm, pnpm, or yarn. Replace pnpm install with npm install or yarn install.

Do I need environment variables?

No. The kit runs with zero configuration. All screens render with mock seed data. No .env file is required.

Accessibility

Is the UI accessible?

Yes. All screens use semantic HTML, keyboard navigation, proper ARIA labels, focus management, skip navigation, and WCAG AA contrast ratios in both light and dark modes. Calendar grids and time slot pickers are fully keyboard-navigable. See the Accessibility guide.

Licensing

What license is included?

Solo (1 developer, internal projects), Team (up to 10 developers, internal projects), or Agency (unlimited developers, client delivery allowed). See the product page for pricing.

Can I use this in client projects?

With the Agency license, yes. Solo and Team licenses are for your own internal products only.

Do I get updates?

Solo includes 6 months of updates. Team includes 1 year. Agency includes priority support and lifetime updates.

Support

How do I get help?

Email support@thefrontkit.com or visit the Support page.