A set of customizable, accessible UI components, designed to integrate well with documentation sites.
import { Note } from "https://cdn.motif.land/motifdocskit@0.0.4"
Notes are a simple way to highlight pieces of information within your text, such as a warning or an informational message.
private
flag need to include an access token in the header.<Note success>The page has been successfully published.</Note>
The following variants are supported, and will affect the icon and color of the note: info
, success
, warning
, error
.
info
variant.success
variant.warning
variant.error
variant.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>
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>