Components

What are Components?

Components are functional UI elements that simplify navigation and interaction on your website. They are the small but important building blocks that guide visitors through your content, improve user experience, and give your site a polished, professional feel.

While Page Building Templates create the main sections of your pages and Blogging Templates structure your blog content, Components handle everything around and between — buttons that invite action, navigation that keeps readers oriented, and footers that round off every page.

Who are Components for?

Every Kadence website benefits from Components. Whether you're building a simple business site or a complex multi-page project, you need buttons that engage visitors, navigation that helps them find what they're looking for, and a footer that wraps things up professionally.

Components are especially useful if you want interactive elements — like animated buttons or a table of contents — without writing custom CSS or JavaScript yourself.

How to use them

Components work just like all other Block Templates — browse the library, insert a component, and customize it. You can place them inside any page section or use them standalone.

A few common use cases:

• Replace default Kadence buttons with styled buttons that have hover effects, 3D press animations, or gradient borders — making your CTAs more engaging
• Add a table of contents to long blog posts or documentation pages so visitors can jump to the section they need
• Drop in a pre-designed footer instead of building one from scratch in the Kadence Header/Footer Builder

Available Component Types

Buttons

Styled button designs that go well beyond Kadence's default options. The library includes a range of interactive effects:

• Grow — Button scales up slightly on hover
• Move-up — Button lifts upward on hover
• Shine — A light sweep animation across the button on hover
• 3D press — Realistic shadow and press-down effect on click
• Glossy mirror — Reflective surface with a smooth scale on hover
• Rotating gradient border — An eye-catching animated gradient border, great for primary CTAs
• Dropdown — Reveals additional options on hover

Drop any of these into your sections to upgrade your calls to action. Each button is fully customizable — change colors, text, links, and sizing to match your design.

Table of Contents

A navigation block that automatically lists the sections of your page or post. Visitors can click to jump straight to the content they're looking for — no scrolling required.

Especially valuable on longer pages — it improves user experience, helps readers find what they need fast, and supports SEO by giving search engines a clear picture of your page structure.

You can see a live example of the Table of Contents component on the Block Templates overview page — it powers the "Navigate through this page" sidebar.

Footer

Pre-designed footer sections that give your pages a professional, consistent finish. Clean layouts with space for branding, navigation links, contact details, and social media. A well-designed footer rounds off every page and gives visitors a clear path to their next action.

Global styling support

Like all Block Templates, Components are built to work with global CSS variables — especially when paired with KickStarter. Button border radiuses, colors, and spacing all respect your global settings. Change them once, and every component on your site updates automatically.

Free, Pro, and Special

• Free — Available with any plan, including the free Free Fallin' collection.
• Pro — Included in all paid plans.
• Special — Also included in all paid plans. Often feature more advanced designs with animations or custom CSS effects.