Component Starter Kit | Uniform platform docs

App router version available

This tutorial is based on Next.js Page Router. If you are starting a new project now, you may want to start with App Router version of CSK, available here, as it is now a default new way to build Next.js apps. The steps of this tutorial won't be different other than the areas where you work within Next.js routing features.

This starter:

Provides a set of modern, theme-able components to learn about Uniform in the quickest way possible and to use these components to build your own project.
Shows how to activate an existing component library in Uniform Canvas. If you already invested in your design system and have a robust component library, you can bring it into Uniform exactly the same way as was done in this starter.
Showcases a custom integration built with the Uniform Mesh SDK, that can extend the default UX of Uniform Canvas with custom layout control parameters, button style selectors, or anything else you want, including:
- Live preview for all page types and in-line editing
- Personalization and A/B testing
- Ability to manage sitemap in Project Map
- Custom themes

Starter component parts#

Uniform built this starter with:

This starter deploys to Vercel by default and leverages on-demand ISR as well as Next.js preview functionality.

With the component starter kit, you can begin working with Uniform tools like Canvas and Mesh in just a few minutes. This set of open-source, customizable front-end components can be added to a component development system, like Storybook, and connected to content sources using Mesh. Now your entire team can access all your source content and data and start crafting customer experiences with little or no code.

Comprised of a Next.js app, React components, and the Uniform SDK, when paired with the available theme pack integration the component starter kit gives you everything you need to start your project.

Theme Pack#

Theme Pack is a special kind of Mesh app that extends the default UX of Uniform Canvas with custom layout control parameters, button style selectors, etc. It allows you to define your own custom theme which will be respected by the custom parameters controlling the look and feel of your components.

Live demo#

Here's a live version of the Component starter kit.

Storybook#

To see all the components and their variants, visit this hosted Storybook

Source code#

The Page Router version of CSK is available here.

App router version available

Install Component Starter Kit#

While you can git clone this starter and set it up manually, Uniform recommends using the CLI if you have limited experience with Uniform.

To install the component starter kit, you'll need a Uniform account. If you don't already have one, you can request an account.

Open a terminal, and navigate to where you want your local project to be created.
Run this in terminal or command line:
```
npx @uniformdev/cli@latest new
```

Enter the following values when prompted:

Prompt	Response
Can we open a browser window to get a Uniform auth token?	Y
Paste your Uniform auth token. [hidden]	[Copy the value in the browser window opened in the previous step. Paste in the value from your clipboard.]
Hey [username]! Choose a Uniform team for your new project	[Select appropriate team name]
Choose your preferred framework (Use arrow keys)	[Choose Next.js]
Choose one of the Uniform starters (for Next.js) (Use arrow keys)	Component Starter Kit
What's your project name?	[Give a descriptive name for your project]

About this step

This command performs a number of tasks for you:

Creates a new Uniform project.
Populates the Uniform project with sample content.
Creates a new front-end application using your preferred framework connected to your new Uniform project.
Starts the new front-end app locally.

Start your local application and open your browser to http://localhost:3000 to access the front-end.

Install Theme Pack integration#

In Uniform, open your project.
Navigate to Integrations.
Add the integration Theme Pack.
From the list of themes, select the theme you want to apply to your project.
The "Uniform" theme is selected.
Click Save.
Go to Experience > Components, and select the Header component. There is a pattern for this component called Main Header. This pattern manages your header and footer content, such as the logo and navigation links. You can also manage the main font that will be used with the theme.
Editing the main header pattern.
To apply theme changes, press Publish (even if the pattern itself isn't changed). You must re-publish the "Main Header" pattern after every time you change the theme on the integration settings page.

Configure home composition#

Open the project map.
Click the node Home to open the composition in Canvas.
The Home page is built from a set of components included into the starter kit.

Next steps#

Connect external data into one of the components.
Add an integration for a system that's a part of your stack.
Try out personalization.
Deploy to your preferred delivery platform. Uniform offers special capabilities with some CDNs, such as edge-side personalization. Please refer to the list of CDN integrations.

FAQs#

Are there more components coming?

Yes, we continuously roll out new components. If you are missing components you need for your project, please contact our team.

Can I use these components for a commercial project?

Yes you can! We’d be very happy if you do.

Can I connect my own content and data to these components?

Of course! You can use one of the dozens Uniform integrations or connect to any REST-based API using a generic REST Data Source via Uniform Mesh without writing a single line of code!

On this page