# Component Starter Kit (CSK)

> A tool kit you can use, modify, or extend to get started with Uniform quickly.

Source: https://docs.uniform.app/docs/get-started/starters/component-starter-kit

The Component Starter Kit offers the following:

- 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.
- An example of 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.
- A showcase for 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.

In addition, CSK provides a Uniform project that demonstrates the following:

## Starter component parts

Uniform built this starter with:

- [Latest Next.js App Router](https://nextjs.org/).
- [React](https://react.dev/)
- [TailwindCSS](https://tailwindcss.com/)
- [TypeScript](https://www.typescriptlang.org/)

With the component starter kit, you can begin working with Uniform tools like [Canvas](../../learn/products/canvas) and [Mesh](../../learn/products/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](https://components-storybook.uniform.app/?path=/story/hero--default), 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.

### Design Extensions integration

Design Extensions (DEX) integration is built Mesh SDK and it extends the default UX of Uniform Canvas with custom design and layout control parameters like color pickers that respect your design system, margin/padding control, 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](https://components.uniform.app/).

### Storybook

To see all the components and their variants, visit [this hosted Storybook](https://components-storybook.uniform.app)

### Source code

CSK source code is available [here](https://github.com/uniformdev/component-starter-kit-next-approuter).

## Next steps

The [CSK tutorial](https://docs.uniform.app/docs/learn/tutorials/component-starter-kit) is a step-by-step guide to the Component Starter Kit.

## 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](../../guides/composition/connect-external-data/data-modeling#configure-data-sources) using a generic REST Data Source via Uniform Mesh without writing a single line of code!