Getting Started

Quick Start

KitFront helps you build website frontends faster by combining starter kits, 500+ production-ready sections, and a simple copy-to-project workflow.

Before you begin

Decide whether your project will use Bootstrap or Tailwind CSS. Each framework has its own starter kit and matching section code.

Recommended workflow

Step 1

Download starter kit

Download the Bootstrap or Tailwind starter kit and use it as the foundation for your project.

Step 2

Choose sections

Browse the Section Library, preview layouts, and choose the sections your page needs. When available, try different backgrounds so the preview matches the version you want to use.

Step 3

Copy updated code

Copy the code after choosing the background you want. Bootstrap sections include matching CSS; Tailwind sections usually do not need separate CSS.

Step 4

Customize content

Replace demo text, images, links, and colors with your real website content and brand details.

What to copy

Bootstrap sections: copy HTML, copy the matching section CSS, and copy JavaScript only when the section includes it.
Tailwind sections: copy HTML and copy JavaScript only when the section includes it.
When background controls are available, choose the background before copying because the copied code includes your selection.
Use the Starter Kit guide for exact file locations.

Access levels

You can explore KitFront before upgrading. Browse sections from the Section Library and compare plans on the Pricing page.

Guest users can browse categories and preview section layouts.
Free accounts can access and copy code from free sections.
Pro accounts can access all sections and premium features.

Introduction

Preview