Component kit for your Headless CMS backed blog

Save at least 40 hours and over $1,000 in development time. Our React.js templates are built with Performance, SEO and Accessibility all top of mind.

Go to docs
BeforeAfter
first image

All the components you need

We analyzed dozens of successful content sites, and took note of what made them stand out. From both a design standpoint, and a performance standpoint.

Layout

The layout component provides different options of displaying content in different alignment methods.

Hero

The hero section leads into your content and includes your title, cover image, author info, and date.

Content / Body

The main entree: this is the body of content that includes many different elements like lists, headers, paragraphs, code blocks, quotes, embeds and more that are all styled for you.

Breadcrumbs

A type of navigation element that allows users to see their current location within a website's hierarchy and easily access higher levels, improving user experience and SEO.

Table of Contents

List of the main topics and subtopics contained on a single page, which helps users to quickly find and navigate to content users are looking for.

Author Bio

Short section that provides information about the person who wrote the content which helps to establish the author's credibility and authority on a given topic.

Image

The image component sits within the body of the content and includes a caption as well as ability to click and expand the image into a modal.

Socials

List of links to the brand's social media profiles, and can be useful for promoting the content and engaging with readers.

Call-outs

Highlighted area that draws the reader's attention to a specific piece of information, such as a summary, key point, or action item.

Video Embeds

The video component allows you to easily display Youtube, Vimeo, MP4 and other types of videos in a responsive and performant manner.

SEO

List of SEO component resources for different frameworks and libraries.

More coming soon...

We're launching new components soon. Stay tuned to learn more.

Building the front-end for a headless CMS is time-consuming, boring, and painstaking.

And there's so much more to a well-built blog than just how it looks. We also need to consider...

  • Is it performant?
  • Is it built with accessibility in mind?
  • Is it built with search engines in mind? (technical SEO)
  • Does it look good or is it just a wall of text?
  • Does it work well on mobile?

Go download any generic pre-made template or theme on the web and you'll notice they all have one thing in common: The blog is an afterthought. They don't account for the dozens of different elements that make up a blog post: images that open into modals, videos that retain a proper aspect ratio on mobile, code blocks, quote blocks, the list goes on.

Each time you set out to build the front-end to connect with a headless CMS it is a major time suck. We wanted to give developers the ability to go from 0 to 1 in an hour or less.

How does it work? Just send your vendor's Rich Text or Markdown into their renderer, and then pass that to our components and you're all set.

Compatible with your favorite headless CMS

In the end, all vendors typically all use the same two formats: Rich Text and Markdown. As long as your headless CMS renders one of these two, it will work with our headless templates.

Pick your package

No recurring subscriptions here! Pay a one-time access fee and get updates for life!

Solo / Duo

For teams of 1 or 2. Use our component library on as many sites as you like.

$Free

  • Access to all components
  • Commercial license
  • As many sites as you like
  • Email support
Get started

Team access

Teams of 3 or more. Use on as many sites as you like.

$Free

  • All components
  • Commercial license
  • Use on as many sites as you like
  • Email support (<24 hours)
Get started

Frequently asked questions

If you have any further questions, feel free to reach out at team@headlesstemplates.com