Template Documentation
Complete component library reference with live previews and code examples. Click on any component's Code tab to see the implementation.
Getting Started
Production-ready Next.js 16 template with React 19, Tailwind CSS 4, and TypeScript.
Tech Stack
Available Scripts
npm run devStart development server with Turbopacknpm run buildBuild for production (server-side)npm run build:staticGenerate static HTML files to ./outnpm run serve:staticPreview static build locallynpm run startStart production servernpm run lintRun ESLintnpm run type-checkRun TypeScript compiler checkStatic HTML Export
Generate static HTML files for deployment to any static hosting provider (Netlify, Vercel, GitHub Pages, AWS S3, etc.)
Note: API routes are automatically excluded from static builds as they require a server.
Color System
Complete color palette with semantic colors and full shade scales. All colors support light and dark modes.
Primary Color Scale
primary
Success Color Scale
success
Warning Color Scale
warning
Destructive (Error) Color Scale
destructive
Info Color Scale
info
Semantic Color Usage
Base semantic colors for common UI patterns
Surface & Background Colors
Background, card, and surface colors
Typography
Display Sizes
For hero sections and large headlines
Display 2XL
Display XL
Display Large
Display Medium
Heading Component
Semantic headings with size variants
Heading 2XL
Heading XL
Heading Large
Heading Medium
Heading Small
Gradient Heading
Text Component
Body text with size and color variants
Extra Large body text
Large body text for introductions
Default body text size
Small text for secondary info
Extra small for captions
Label Component
Form labels with sizes
UI Components
Core UI primitives from @/components/ui.
Button
Button Variants
Different visual styles for various contexts
Button Sizes
Available size options from xs to xl
Button with Icons
Left and right icon support
Button States
Loading and disabled states
IconButton
Icon Buttons
Square buttons for icon-only actions
Badge
Badge Variants
Status indicators and labels
Badge Sizes & Features
Different sizes and interactive badges
Card
Card Variants
Container component with multiple styles
Default
Standard style
Content here
Elevated
More shadow
Content here
Outline
Strong border
Content here
Interactive
Hover to see
Click me!
Card with Footer
Complete card with all sections
Complete Card
With all sections
Card content with description text.
Tabs
Tab Variants
Three visual styles for tabs
Default (Underline)
Contained
Pills
Separator
Separator
Visual divider between content
Content above the separator
Content below the separator
Loading States
Spinner
Loading indicator with multiple sizes
Skeleton
Content placeholders while loading
Toggle & ToggleGroup
Toggle Buttons
Pressable toggle and grouped toggles
Single Toggle
Single Selection
Multiple Selection
Timeline
Timeline
Chronological event display
Order Placed
Your order has been confirmed
Processing
Your order is being prepared
Shipped
Waiting to be shipped
Code Display
CodeBlock & InlineCode
Display code with syntax highlighting
1const greeting = 'Hello, World!';2console.log(greeting);Use the useState hook for local state management.
Terminal
Terminal Display
Command-line interface simulation
AnimatedBackground
Animated Background
Decorative animated background effects
Content on animated background
Layout Components
Layout components from @/components/layout for page structure.
PageLayout & PageHeader
Main page wrapper with header
PageLayout provides consistent page structure with optional breadcrumbs. PageHeader supports animated, gradient, or plain backgrounds.
Container & Section
Content width and spacing utilities
Container (default)
Container narrow
Form Components
Form components from @/components/forms.
Input
Input Variants
Text input with different states and addons
This field is required
PasswordInput
Password Input
Password field with show/hide toggle
Minimum 8 characters
SearchInput
Search Input
Search field with icon and clear button
Textarea
Textarea
Multi-line text input
Max 500 characters
Select
Native Select
Standard HTML select with styling
CustomSelect
Custom Select
Advanced select with search, multi-select support
Checkbox
Checkbox
Boolean selection control
Switch
Switch
Toggle on/off control
Receive email updates about your account
Form Structure
Form Layout Components
Components for structuring forms
Notifications
How would you like to be notified?
E-commerce Components
E-commerce components from @/components/ecommerce.
PriceDisplay
Price Display
Formatted prices with sale styling
Regular
Sale
Large
Small
Rating
Rating
Star rating display
With Count
Stars Only
Various Ratings
QuantitySelector
Quantity Selector
Increment/decrement input
Default
Small
ProductCard
Product Cards
Product display cards with variants
Horizontal Product Card
List view layout for products
CheckoutSteps
Checkout Steps
Multi-step progress indicator
ShopHeader
Shop Header
Animated hero for e-commerce pages
Our Products
CartItem
CartSummary
Cart Summary
Order totals display
Order Summary
FilterSidebar
Filter Sidebar
Product filtering controls
Marketing Components
Landing page components from @/components/marketing. These are full-width section components.
Hero Section
Main landing section with CTA
Build Something Amazing
Start your next project with our production-ready template.
Features Section
Feature grid with icons
Fast
Optimized performance
Secure
Built-in security
Global
CDN deployment
Stats Section
Key metrics display
Testimonials
Customer reviews
“This template saved us weeks of development time. The components are well-designed and easy to customize.”
Jane Smith
CTO at TechCorp
FAQ Section
Frequently asked questions
How do I get started?
Clone the repo and run npm install.
Can I use this commercially?
Yes, the license allows commercial use.
CTA Sections
Call-to-action components
Ready to get started?
Join thousands of developers building with our template.
Configuration
Configuration files for styling and site settings.
Tailwind CSS v4 Setup
CSS-first configuration with JavaScript extensions
This template uses Tailwind CSS v4's CSS-first approach with @theme for CSS variables, combined with @config directive to load extended theme values from JavaScript.
Custom Typography Classes
Extended font sizes defined in tailwind.config.ts
Display Small (1.875rem)
Body Large (1.125rem)
Label Medium (0.8125rem)
Site Configuration
Global site metadata
Site config defines metadata used for SEO, social sharing, and contact info.
Navigation Configuration
Multi-level navigation structure
Navigation config supports up to 3 levels of nesting for mega menus.