Get started with the CSK

This tutorial covers the essential topics for developers using Uniform. The Uniform Component Starter Kit (CSK) is used as the starting point for building a web application with Uniform.

Goals

  1. Create a new Uniform project using the Uniform Component Starter Kit.
  2. Install and configure the Uniform Theme Pack.
  3. Understand the purpose of the global template.

note

Prerequisites

You must have access to a Uniform team with the ability to create new projects. If you are an active customer or a partner, please get in touch with your Uniform team administrator colleague and ask for an invite.

If you are not sure or your company does not have a Uniform team, you can request a sandbox here.

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

  1. Open a terminal, and navigate to where you want your local project to be created.
  2. Run this in terminal or command line:
    npx @uniformdev/cli@latest new
  3. Enter the following values when prompted. You may be asked for permission to install packages:
    PromptResponseDescription
    Can we open a browser window to get a Uniform auth token?YThis will open a new browser window where an access token is displayed. Copy this value into your clipboard.
    Paste your Uniform auth token [input is hidden]Paste the access token you copied into your clipboard, then press Enter.When you paste the access token, it will not be displayed in the terminal. This is a security feature.
    Hey username! Choose a Uniform team for your new project (Use arrow keys)Select the team you want your project created in.
    Choose your preferred framework (Use arrow keys)Next.js
    Choose one of the Uniform starters (for Next.js) (Use arrow keys)Component Starter Kit (Recommended)
    What's your project name?CSK Tutorial

    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.
  4. Open your browser to http://localhost:3000 to access the front-end application.
  1. In Uniform, open your project.
  2. Navigate to Integrations.
  3. Add the integration Theme Pack.
  4. From the list of themes, click Uniform to select the theme.
    theme-pack-settings
    The "Uniform" theme is selected.
  5. Click Save.
  6. Navigate to Experience > Components.
    component-library
    Editing the main header pattern.
  7. Click the component Main Header.

    About this step

    This pattern manages your header content, such as the logo and navigation links. You can also manage the main font that will be used with the theme.

    main-header-pattern
    Editing the main header pattern.
  8. Click Publish to apply the theme change.

    You must publish the pattern

    Click this button even though you did not make any changes to the pattern. You must re-publish the "Main Header" pattern after every time you change the theme on the integration settings page.

  1. Navigate to Experience > Project Map.

    project-map
    The project map content tree of the default Component Starter Kit install.

  2. Click the node Home to open the composition in Canvas.

    home-composition
    The composition is open, with the composition parameters visible on the right.

  3. Click the blue background image to select the Hero component. The Home page is built from a set of components included into the starter kit.

    hero-component-selected
    The Hero component is selected, with the component parameters visible on the right.

  4. Click to hide the structure drawer in order to more of the preview.

    hidden-structure-drawer
    Structure drawer is hidden.

  5. Click to return to the Project Map.

    project-map
Last modified
Next
Define a new composition