Bizzkit Starter Kit
In the Bizzkit CMS Starter Kit, you will find example components that can be used as-is or as a starting point for creating your own components. These components are built to work seamlessly with Bizzkit plugins and will help you get started with creating your own components.
You can find the components on GitHub in the cms-starter-kit repository here. Please refer to the Developer overview for more information on getting started.
You can also find additional details about the components under concepts.
Example components
The components are written as React functional components and styled using CSS modules. Custom components for Builder.io are defined in the corresponding {component}.builder.ts files. Builder.io component fields are composed of built-in input types as well as Bizzkit's custom input types.
DamImage
Displays optimised, responsive images stored in Bizzkit DAM. The CDN supports transformation functions that are either built-in to the system or custom-defined via the API.
DamVideo
Streams video files stored in Bizzkit DAM. The files are streamed "as-is", meaning videos should be uploaded at the desired size and compression before being selected in the component.
ProductCard
Displays a card containing the product image, stock, and price information stored in Bizzkit Ecommerce Search. This example assumes that the configured scope provides media (image), stock, and price fields.
ProductCatalogue
A simplified product list component where users can filter, sort, and paginate products stored in Bizzkit Ecommerce Search. If a search phrase is provided in the Products field in Builder, the component omits the search functionality.
ProductSlider
Displays a collection of preselected products in a carousel/slider format. This component builds on the functionality and API integration of the ProductCard component. Sliders can become complex when considering responsiveness, gestures, and timers, which are not fully addressed in this implementation. For production use, consider building a more robust solution or using a third-party library such as Embla Carousel.
DynamicProductSlider
Similar to ProductSlider, but products are provided via a query instead of a predefined list. Users can define parameters in Builder, which the component uses to fetch products dynamically.
Sections
Sections enable you to create reusable content across multiple pages, such as headers. They can be targeted in the same way as pages. For more details, refer to Builder's documentation.
This example requires a section content model called Header. The model has no fields.
Structured data
Structured data enables you to store reusable data in Builder.io without tying it to specific designs or pages. For more details, refer to Builder's documentation or explanation.
This example requires a structured data content model called USP. The model should have a single field, items, of type List, with two fields for each item:
label(typeText)link(typeUrl)
Styling
The project uses Material UI as its design system, while custom styling is implemented using the library's sx property.
Breakpoints
The breakpoints (screen sizes) defined in Material UI must match the values set in Builder to ensure a consistent user experience:
- Desktop:
900pxand up - Tablet:
600px-899px - Mobile:
599pxand below
These are default values and can be customised if necessary. If changes are made, the matching values must also be updated in Builder.
Design tokens
The project exports theme values used in Material UI as Builder.io design tokens. This ensures consistency between project components and content created in Builder.
SEO
Basic search engine optimisation can be achieved by adding appropriate meta tags to the <head> element, such as description, keywords, and Open Graph fields.
This example extends the Builder.io Page model with fields that can be populated by content creators and rendered using the <SeoMetadata> component.
The Page model should include the following fields:
title(typeText)description(typeLong text)keywords(typeTags)noIndex(typeBoolean)noFollow(typeBoolean)openGraphTitle(typeText)openGraphDescription(typeText)openGraphImage(typeBizzkit DAM file)