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.

Install Component Starter Kit#

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

2. Run this in terminal or command line:

   CopyCopied!Wrap

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

   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. Start your local application and open your browser to http://localhost:3000 to access the front-end.

Install Theme Pack integration#

1. In Uniform, open your project.

2. Navigate to Integrations.

3. Add the integration Theme Pack.

4. From the list of themes, select the theme you want to apply to your project.

   

   The "Uniform" theme is selected.

5. Click Save.

6. Go to Content > 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.

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

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