Getting Started

Preview

Use Preview to customize and test a section before copying it into your Starter Kit.

Annotated KitFront section Preview explaining the code tabs, background options, section controls, device preview buttons, and live preview area
Follow numbers 1–5 below. Open the image to view the interface at full size.

Follow the numbers in the image

NumberWhat to do
1Preview the section, then open HTML, CSS, or JS when you are ready to copy.
2Choose the background first because your selection is included in the copied code.
3Adjust available options such as heading alignment or header behaviour.
4Check the section in Desktop, Tablet, and Mobile views.
5See your background and option changes instantly in the live preview.

Copy the correct code

  • Choose your background before copying because the selection is added to the code.
  • For Bootstrap, copy HTML, CSS, and JavaScript when provided.
  • For Tailwind, copy HTML and JavaScript when provided.

Access

Free sections need a free account. Premium sections need an active Individual or Team plan.

KitFront in action
...

times sections explored and used by developers worldwide.

More developers are exploring KitFront every day — finding the right sections and building faster.

And the number keeps growing.