Component Starter Kit tutorial

This is a newer tutorial

This tutorial is for version 6 of the Component Starter Kit, built for Next.js 15 App Router.

For prior versions, see the older CSK tutorial.

As the name suggests, Component Starter Kit (CSK) is an open-sourced starter project that you can use, modify, or extend to get started with Uniform quickly.

CSK was built to be moldable and customizable to your needs and look and feel, and it's already pre-wired with the latest Uniform SDK for the latest Next.js App Router.

CSK comes with a couple of dozen of pre-built components built with React and Tailwind CSS, as well as component patterns to help you get started with Uniform. See this CSK Storybook for the full list of components.

At Uniform, we use CSK as a foundation for our demo system and proof of concept projects, allowing to show value to our customers and partners in hours instead of days and weeks. We also use it for learning and often as a starting point for new projects when working with our customers and partners.

Your use cases may vary, but at the minimal, CSK is a great reference implementation for learning about Uniform and could be a starting point for your own project, especially if you don't have an existing component library or design system.

This generation 6 of CSK is a complete rewrite of the previous version and includes a number of new features and improvements. It is based on are more minimalistic approach and includes only the most essential components and features:

  • This version is built specifically for Next.js 15 (for App Router only) and React 19, leveraging the latest Uniform SDK v20+, enabled for all the latest Uniform DXP features!

  • Much more lightweight, minimalistic and simplified approach:

    • zero external dependencies besides @uniformdev, minimum distractions - essentials only in the core version.
    • zero components added to the codebaseby default, can add components into your codebase with npm run component:extract and customize how you see fit

  • Revamped theme management system based on a new Design Extensions integration that supports design tokens

  • More atomic components supporting built with patterns leaning on the authorable components paradigm

  • Optimized for great performance out of the box

    cwv
    Stellar Core Web Vitals performance out of the box

  • Internationalization / localization ready (with a more advanced localization recipe coming soon)

  • Removed daisyui and many other non-essential dependencies

  • Included standard sitemap implementation Server-side rendering by default. Static site generation can be enabled on top. Dev Experience updates: component:scaffold and component:extract flows, watch mode for design extension update sync and a developer config for content sync that scopes the operation to developer artifacts only.

  • Extensive documentation about components.
  • More templates demonstrating various use cases (commerce, etc.) and brand theming.
  • Solution recipes as stand-alone packages installable via CSK CLI.
Last modified
Next
Get started