Skip to main content

Component Library

📝 Note​

You can use tailwind in classNames (cheatsheet).

All code here can be used directly in an .mdx document as is.
Some components will require importing, some are available globally via MDXComponents.ts file. This will be specified in each example.

If a component is failing, check the component's interface - you are probably missing a required prop.

This page is also an .mdx document that uses both markdown and JSX components.
Scroll down and click on " Edit this page" link to see the mdx raw source code.

Hint: When in github,
👉 raw mdx files can be viewed by clicking on the "Raw" button.
👉 press . on a keyboard, which will open the file interactively in a browser VSCode.
👉 In VSCode, you can press Ctrl+P to quickly navigate between files by name.

Show code

Vogon Poetry
Glarg blibberous squelch, zogon bleep tumultuous flarg. Vexatious splurg, quib quob, drangle dweep zestuous glop. Mibbling plurt, vogonous thrang, nubble wib squirm and blang. Zorph and blumph, creptious strangle, quixotic blarg, zweep and tangle.
Go to Library

See more complex examples below.

CardLinkGroup​

Show code

CardLink
Using custom label and relative link.
Go to xyz
CardLink
Using default label and absolute link.
View More
CardLink
This is a multiline
description with image.

Other cards in row will stretch vertically.
View More
CardLink
This card uses custom basis 64%. Other cards will take remaining space.
View More
Go to Library
CardLink
Cards on last row will fill up remaining space horizontally.
View More

Icon​

See Icons for a list of available IconKeys.

Show code

IconButton​

Show code

When href is provided, the card will function as a link.

Images can be stored in /static/img/* folder and linked with e.g. src="/img/core.gif".

Show code

label

description

TypeLabel​

import { TypeLabel } from '@site/src/components/TypeLabel'

// Required
<TypeLabel isRequired>string</TypeLabel>

// Default value
<TypeLabel className="my-4" defaultValue={0}>number</TypeLabel>

// With link
<TypeLabel isRequired link="https://github.com/wevm/viem/blob/main/src/types/eip1193.ts#L26">
  EIP1193Provider
</TypeLabel>
stringrequired

numberdefault: 0

EIP1193Providerrequired