Tutorials

Component Starter Kit

This starter:

  1. 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.

  2. 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.

  3. 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

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 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.

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

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

Here is the source code.

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.

  1. Open a terminal, and navigate to where you want your local project to be created.

  2. Run this in terminal or command line:

    and enter the following values when prompted:

    PromptResponse
    Can we open a browser window to get a Uniform auth token?Y
    Paste your Uniform auth token [hidden][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:

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

  3. Open your browser to http://localhost:3000 to access the front-end.

  1. Open the newly created project. You can find it under the team you selected during command line prompts.

  2. Open the Integrations and locate the "Theme Pack" under "Starters" and install it into this project:

    theme-pack

  3. After the installation, the settings page will open. Select a desired theme (Uniform, JavaDrip, or build a custom one).

    theme-pack-settings

  4. Make sure to click "Save."

  5. Open Content > Compositions and locate and open the Global Template composition.

    global-composition-template

    This composition is responsible for storing all the global settings for the starter kit, including theme, fonts, logos, and navigation.

  6. Please save and publish the composition to make sure the theme settings applied. You can also change a font:

    global-template-composition

  7. View or edit the header and footer logo by activating the corresponding component in the structure panel on the left:

    header-logo

  8. Now locate the Home page under Content > Project Map and open it in Canvas:

    home-page

  9. The Home page is built from a set of components included into the kit:

    csk-home-page
  1. Connect external data into one of the components.
  2. Add an integration for a system that's a part of your stack.
  3. Try out personalization.
  4. 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.

Are there more components coming?

Yes, we're working on the next batch of components, including navigation components and commerce.

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 a pre-built Uniform integration or connect to any REST-based API source using Uniform.

Last modified
Next
Hello World