This page documents general-purpose frontend components (landing, layout, billing, auth, dashboard, analytics, etc.) — not strictly CMS components. It lives under the Content (CMS) docs group for legacy organizational reasons; only HTMLRenderer, ShortcodeRenderer, and CMSPromoBar are CMS-specific.
The boilerplate includes a collection of ready-to-use frontend components for building landing pages,
marketing sections, and user interfaces. All components support dark/light mode and are fully responsive.
Landing Page Components
Pre-built sections for creating compelling landing pages:
Component
File
Description
LandingHero
landing-hero.tsx
Hero section with badge, animated title, CTAs, social proof, and optional waitlist form
LandingPricing
landing-pricing.tsx
Pricing table with monthly/yearly toggle, feature comparison, and plan cards
LandingFAQ
landing-faq.tsx
Accordion-style FAQ section with smooth animations
LandingHowItWorks
landing-how-it-works.tsx
Step-by-step feature showcase with icons and descriptions
LandingStats
landing-stats.tsx
Animated statistics counter section
LandingNewsletter
landing-newsletter.tsx
Newsletter signup section that posts to /api/newsletter/subscribe via the active email provider
LandingLicenses
landing-licenses.tsx
License products showcase section for one-time purchases
Social Proof Components
Component
File
Description
Testimonials
testimonials.tsx
Carousel with customer testimonials, avatars, ratings, and auto-play
LogoCloud
logo-cloud.tsx
Animated marquee of partner/integration logos
SocialProof
social-proof.tsx
User count avatars with rating display (used in hero sections)
Layout Components
Component
File
Description
TransparentNavbar
transparent-navbar.tsx
Scroll-aware navbar with transparency effect, mobile menu support
Footer
footer.tsx
Site footer with links, social icons, and legal links
PageBackground
page-background.tsx
Animated background with blobs and particles effect
GlassSection
glass-section.tsx
Glassmorphism container with blur and transparency
TextImageSection
text-image-section.tsx
Two-column layout with text and image (left/right variants)
MobileNav
mobile-nav.tsx
Slide-out mobile navigation drawer
Utility Components
Component
File
Description
VideoEmbed
video-embed.tsx
YouTube/Vimeo embed with lazy loading and thumbnail preview
PromoBar
promo-bar.tsx
Top announcement bar with dismiss functionality
CMSPromoBar
cms-promo-bar.tsx
CMS-driven promo bar that fetches content from database
CookieConsent
cookie-consent.tsx
GDPR cookie banner with category toggles
CrispChat
crisp-chat.tsx
Crisp live chat widget with user identification
Turnstile
turnstile.tsx
Cloudflare Turnstile bot protection widget
Form Components
Component
File
Description
ContactForm
contact-form.tsx
Contact form with Turnstile protection and email sending
NewsletterForm
newsletter-form.tsx
Newsletter subscription via the active email provider (Brevo / Mailjet / noop)
Waitlist
waitlist.tsx
Pre-launch waitlist signup (inline and modal variants)
Navigation Components
Component
File
Description
LocaleLink
locale-link.tsx
Locale-aware link that auto-prepends current locale
LanguageSwitcher
language-switcher.tsx
Dropdown to switch between available locales
ThemeToggle
theme-toggle.tsx
Dark/light mode toggle button
AccountDropdown
account-dropdown.tsx
User menu with account switching and logout
Content Rendering
Component
File
Description
MarkdownRenderer
markdown-renderer.tsx
Renders Markdown content with syntax highlighting.
Anti-pattern warning (C3): historically shipped with an unjustified 'use client' directive that pulled react-markdown + remark-gfm + rehype-highlight (~100 KB) into the browser bundle for static content. Keep this as a Server Component unless a concrete useState/useEffect/event handler/browser API is required — see .claude/rules/anti-patterns.md#c3.
HTMLRenderer
html-renderer.tsx
Safely renders HTML with shortcode processing
ShortcodeRenderer
shortcodes/index.tsx
Processes CMS shortcodes into React components
Billing & Pricing Components
Component
File
Description
PricingTable
billing/pricing-table.tsx
Full pricing table with monthly/yearly toggle and plan cards
PricingCard
billing/pricing-card.tsx
Individual plan card with features, price, and CTA
PricingComparison
billing/pricing-comparison.tsx
Feature comparison table across plans
CreditDisplay
billing/credit-display.tsx
Shows current credit balance with visual indicator
CreditPackCard
billing/credit-pack-card.tsx
One-time credit pack purchase card
CreditPurchaseModal
billing/credit-purchase-modal.tsx
Modal for selecting and buying credit packs
LicenseCard
billing/license-card.tsx
License product card with price, features, and buy button
LicensePricingTable
billing/license-pricing-table.tsx
Displays all license products for purchase
LicenseStatus
billing/license-status.tsx
Color-coded license status badge (active, expired, revoked)
Auth Components
Component
File
Description
LoginForm
auth/login-form.tsx
Magic link login with OAuth provider buttons and Turnstile
OnboardingForm
auth/onboarding-form.tsx
Post-signup onboarding to collect profile data and preferences
ProfileForm
my-account/profile-form.tsx
User profile editing (name, avatar, phone, newsletter, deletion)
CheckoutSuccess
checkout/checkout-success.tsx
Post-checkout confirmation page with plan details
Dashboard Components
Component
File
Description
AccountSwitcher
dashboard/account-switcher.tsx
Dropdown to switch between personal and workspace accounts
DashboardHeader
dashboard/header.tsx
Dashboard top bar with account info and user menu
PrivateSidebar
private/sidebar.tsx
Private dashboard navigation sidebar (Dashboard, AI Agents, Knowledge Base)
QuickActions
private/quick-actions.tsx
Dashboard quick action cards (new chat, buy credits, etc.)
Chat & AI Components
Component
File
Description
ChatInterface
chat/chat-interface.tsx
Full AI chat with streaming, agent selector, and session history
PrivateChatInterface
private/chat-interface.tsx
Private dashboard chat wrapper with layout integration
DocumentManager
documents/document-manager.tsx
RAG document upload with drag-and-drop, status polling, and delete
Organization Components
Components for B2B workspace/organization management:
Component
File
Description
MembersList
org/members-list.tsx
Organization members table with roles and actions
MemberDetailView
org/member-detail-view.tsx
Individual member detail page with role management
InviteMemberForm
org/invite-member-form.tsx
Form to invite new members by email with role selection
PendingInvitations
org/pending-invitations.tsx
List of pending invitations with resend/cancel actions
RolesOverview
org/roles-overview.tsx
Organization roles list with member counts
RolesPermissionMatrix
org/roles-permission-matrix.tsx
Visual matrix of roles vs permissions
BillingActions
org/billing-actions.tsx
Subscription management and Stripe portal access
CreditHistory
org/credit-history.tsx
Credit transaction history table with filters
SettingsForm
org/settings-form.tsx
Organization name and settings editor
DangerZone
org/danger-zone.tsx
Organization deletion with 30-day grace period
OrgSidebar
org/sidebar.tsx
Organization dashboard navigation sidebar
OrgHeader
org/header.tsx
Organization dashboard top bar
Workspace Components
Component
File
Description
CreateWorkspaceForm
workspace/create-workspace-form.tsx
Form to create a new workspace account
WorkspaceInviteForm
workspace/invite-member-form.tsx
Invite members to a workspace
WorkspaceMembersList
workspace/members-list.tsx
Workspace members list with role badges
Notification Components
Component
File
Description
NotificationPermission
notifications/notification-permission.tsx
Push notification permission request button with status handling
NotificationPreferences
notifications/notification-preferences.tsx
Toggle switches per notification type with quiet hours config
Analytics Components
Component
File
Description
AnalyticsProvider
analytics/analytics-provider.tsx
Consent-aware analytics wrapper with trackConversion(), trackSignUp(), and event tracking hooks
GoogleTagManager
analytics/google-tag-manager.tsx
GTM container loader (GTM-XXX → gtm.js). GA4/AW IDs are handled by GoogleAdsTag.
GoogleAdsTag
analytics/google-ads.tsx
Google tag (gtag.js) loader with per-action conversion tracking (CONVERSION_PURCHASE, CONVERSION_SIGNUP), googleAdsEvents, and gtagReportConversion
MetaPixel
analytics/meta-pixel.tsx
Facebook/Instagram pixel with consent-aware loading
XPixel
analytics/x-pixel.tsx
Twitter / X conversion pixel with consent-aware loading (fires only after the marketing consent category is granted)
shadcn/ui Components
The boilerplate uses shadcn/ui for base UI components (Button, Card, Dialog, etc.). These are located in components/ui/ and can be customized or extended as needed.