In this article you will how to start using the website sections and content from the Flowbite Blocks collection together with a headless CMS (content management system) based on Next.js called Suncel CMS.

For sites that publish a lot of content, usually as part of an SEO strategy, content management can be difficult, especially from an integration perspective.

So let's dive into this article and learn how we can use these two resources together!

Flowbite Blocks

Flowbite provides a library of pre-designed blocks with many advantages:

• Wide choice of Blocks to cover all types of pages and layouts;
• Responsive interfaces;
• Dark mode support included;
• Made on top of Tailwind CSS, one of the most popular CSS frameworks.

These blocks can then be used in applications or websites made in React, Vue, Laravel, Svelte, and other frameworks. The question then arises as to how the injection of content in these blocks is done in order to produce content at scale?

For some pages or layout sections like the header, footer, homepage, where the content does not vary too much, it is not very problematic (although it can be useful to do A/B testing on this type of pages for example).

But for article type pages or content pages with a pure SEO purpose, it can become tedious to manage your content without a CMS. So the question is: how to link Flowbite Blocks to a CMS in order to accelerate the content production?

Suncel: a CMS for Next.js apps

Suncel is a CMS that allows to define Blocks (sections) that can be reused endlessly in the content. These Blocks are defined at setup (integration phase) and then the content editor can be used by any user without technical skills. The complexity is left to the developer to create the blocks.

The content editor can therefore create pages by stacking blocks on top of each other, which allows to create a page ready to be published in a few clicks. Each block has editable fields, the possibility to add images, links, etc...

Suncel is more a hybrid CMS than a pure headless CMS (like Contentful or Strapi for example), in the way that it is designed for Next.js apps (Vue.js/Nuxt.js will be compatible later) and is not "techno agnostic".  

But this connection with Next.js has some advantages: it allows an easier creation of Blocks and also allows to have a content editor with a live preview.

Suncel + Flowbite: empower your content

Installing Suncel requires to create content Blocks that are components with editable fields. This step can take some time and the free Flowbite Blocks package helps to save a precious time during the setup, whether it is done by an agency for a client or for its own setup by your dev team.

After installing Suncel on your Next.js application or on a new project (in one line with the Suncel CLI, see the quickstart guide), you can install the Suncel/UI package which includes all the free Flowbite Blocks.

All these blocks are editable and customizable and will be immediately editable for editing.

Adding the package is done in one command line:

npm i @suncel/ui

You must then inform Suncel of the addition of these blocks in the menuBlocks.tsx file (one line to add). See the Suncel/UI documentation for the installation of the Flowbite package.

And that's it! The library of editable Blocks now contains the Flowbite free Blocks and the editing of the content can now start.

Each block has different editable fields and different options and for example some of them have a layout that can change with a left or right positioning:

Others contain repeatable elements, which can each have their own characteristics, such as images, text, or links:

We have recently published a crash course video showing the full extent of using both Flowbite Blocks and Suncel CMS to create websites that are easily managed via the headless CMS that comes integrated with Suncel.

Go further by creating your own Flowbite editable Blocks

If you have purchased the Pro version of Flowbite and you want to make these Blocks editable, you just have to insert editable components from Suncel inside (see for example this video).

Creating an editable component in Suncel is done in three steps:

• Add editable fields in the Block: simple or RichTexts fields, images, links, repeatable elements;
• Add default values to these Blocks when they are first loaded;
• Define what can be edited in the right side bar: it allows to edit links or texts that are difficult to edit from the live preview interface.

Please let us know what you think of this stack and what type of website you would like to build with a stack such as this in the comments section!