Documentation Kit

A set of customizable, accessible UI components, designed to integrate well with documentation sites.

Usage

import { Note } from "https://cdn.motif.land/motifdocskit@0.0.4"

Components

Notes

Notes are a simple way to highlight pieces of information within your text, such as a warning or an informational message.

API calls using the private flag need to include an access token in the header.

Basic example

<Note success>The page has been successfully published.</Note>

The page has been successfully published.

Using variants

The following variants are supported, and will affect the icon and color of the note: info, success, warning, error.

A note with the info variant.

A note with the success variant.

A note with the warning variant.

A note with the error variant.

A note with no variant.

Custom style

Remove default styling by adding the noStyle prop. Furthermore, add custom classes using the className and iconClassName props. You can also replace the icon using the Icon prop.

A note with a custom style and icon.

import { LightbulbFill } from "https://cdn.motif.land/motifheroicons"

<Note
  noStyle
  Icon={LightbulbFill}
  className="bg-yellow-50 p-3 rounded-lg border \
    border-yellow-200 text-sm items-center"
  iconClassName="text-yellow-400 w-7">
  A note with a custom style and icon.
</Note>

Code Box

A simple way to display code in different languages.

<CodeBox>
  <CodeBoxTab label="Ruby">```ruby # Some Ruby code ```</CodeBoxTab>
  <CodeBoxTab label="Python">```python # Some Python code ```</CodeBoxTab>
  <CodeBoxTab label="JavaScript">```js // Some JavaScript code ```</CodeBoxTab>
</CodeBox>