DocsKit components

The DocsKit package includes a collection of pre-designed custom components that you can readily utilize in your MDX documentation pages.

Message component

Display notifications or info bars in your pages.

Error message example:

This is an error message

How to add it to your page:

<Message variant="error">
  This is an error message
</Message>

Info message example:

This is a filled info message: the filled attribute adds a colorful background

How to add it to your page:

<Message variant="warning" filled>
  This is a filled warning message: the `filled` attribute adds a colorful background
</Message>

Variant:

info (default)
success
warning
error

Card component

Create content teasers or highlighted content blocks in your Markdown pages.

Card example
You can add Markdown to the card content

<Card shadow hoverable>
 *Card example*  
 You can add Markdown to the card content
</Card>

Highlighted card
You can add Markdown to the card content

<Card variant="highlighted" hoverable>
 *Highlighted card*  
 You can add Markdown to the card content
</Card>

Gradient card
You can add Markdown to the card content

<Card variant="gradient">
 *Gradient card*  
 You can add Markdown to the card content
</Card>

Card with background image
You can add Markdown to the card content

import myCustomImage from '../illustration1.svg';

<Card variant="gradient" bgImage={myCustomImage}>
 *Card with background image*  
 You can add Markdown to the card content
</Card>

Button component

Add styled CTA buttons using the <Button> component:

Primary button

<Button href="#">Primary button</Button>

Secondary button

<Button href="#" variant="secondary">Secondary button</Button>

Grid component

Use the <Grid> component to create multi-column layouts.
The layout will automatically fall back to a single-column layout on mobile devices with smaller screens.

Column 1

Column 2

<Grid>
  <Card variant="highlighted" hoverable>
  Column 1
  </Card>
  <Card variant="highlighted" hoverable>
  Column 2
  </Card>
</Grid>

Column 1

Column 2

Column 3

<Grid cols="3">
  <Card variant="highlighted" hoverable>
  Column 1
  </Card>
  <Card variant="highlighted" hoverable>
  Column 2
  </Card>
  <Card variant="highlighted" hoverable>
  Column 3
  </Card>
</Grid>