import { mdx } from '@mdx-js/react';
import { CssLayout } from '~/mdx-layout-css';
export default CssLayout;

# dockit-react

This is a documentation kit for [React](https://reactjs.org/) based design systems designed for [Backlight](https://backlight.dev/), an all-in-one Design System platform.

It contains features that will help you write better documentation 🚀

## MDX Layouts

Ready-to-use MDX layouts!

- 🎄 Responsive nav bar waiting for your awesome logo to be included
- 📖 Automated links to your project components
- 🌙 Out of the box dark mode
- 🔧 Customizability: while providing sensible defaults, you can fork & modify it to your heart's content!

At the moment two layouts are available
**mdx-layout-css** relies on pure CSS styling, while **mdx-layout-tailwind** uses Tailwind's [typography plugin](https://github.com/tailwindlabs/tailwindcss-typography) styles.

## Showcases components

Documenting design tokens in a way that makes them visual and easy to use should be easy
This is why we have specific showcases components with

- 🔣 support for many token types (colors, spacing, transitions, z-indexes and more!)
- 👨‍💻 different technologies, like bare CSS or Tailwind or event System UI
- 📋 simple clicks to copy shown tokens so your documentation is easy to use

## Standalone components

You will find there some of the components we use in showcases components, but also additional components that may prove useful for your documentation

For example, the **Props** component will automatically pick-up and display the
props of your React components, and the **Dos** && **Donts** components allow
you to easily document what to do or not to do.