Integration

There's one thing every Design System shares: it only generates value when being applied! And as a Design System also needs to be able to stand on its own, applying it in projects always means integrating it in some way... into something you actually build websites, interfaces or apps with.

That's why we, from the very start, tried to find abstractions that can help in that. One core aspect of this is using JSON Schema to encode component APIs. This structure is especially useful when connecting headless CMS systems (like Sanity, Contentful, Storyblok, etc) or other Design System adjacent tooling (like Uniform.dev, Knapsack.cloud, Backlight.dev).

Next to using good abstractions, we also try to build as many integrations as possible ourselves. Both to make adoption easier, and to give inspiration on how to best leverage kickstartDS. It also generates great feedback on how to improve our core further, making it adaptable in as many contexts as possible.

While those types of integrations help with adoption, there are also integrations meant to improve the developer experience (DX) when working on the Design System itself. One big category there would be integrating well with Storybook. We've written some addons to aid in that ourselves, but also try to always provide best-practice configuration and recommendations for your setup!

See below for a list of integratons already built, that can be used today. Or hit us up if you feel like there is something that is obviously missing! We also have some details on our main website about integrations.

Storybook

Integrating well with Storybook means giving all the users of your Design System the best experience possible. It should be the perfect workbench, welcoming every type of stakeholder!

Storybook

JSON Schema

Integrate your component API directly into Storybook

Schema

Design & Component Token

Integrate, view and document token in Storybook.

Token

Generated Controls

Get generated Controls for Storybook for free, with enhanced documentation included.

Controls

Premade Stories

Re-use stories already created, to get your docs up and running even faster

Stories

Theming

Add some flavour to the way your Storybook looks!

Theming

React

React as our templating language of choice offers great integration capabilities, and we've built some additional ones on top of those... to help you even more when creating your own components.

React

Image Rendering

How to replace images in your Gatsby or Next.js project.

Images

Rich Text Rendering

How to replace rendered text with a custom RTE implementation, e.g. Sanitys PortableText

Rich Text

Frameworks

Integration with common React frameworks can really speed up adoption, and make the difference between a successful Design System... and one that fails!

Frameworks

Gatsby

How we can help with Gatsby through our own theme, specific to kickstartDS and its components.

Theme

Next.js

Helper and tipps to aid you in creating an app or interface based on Next.js with kickstartDS.

Helper