Buttons

Buttons are used to trigger actions or events. They are typically placed throughout your UI, in places like forms, modals, dialogues, and cards. Clicking on the button will copy the code to your clipboard.

Size · lg

Size · default

Size · sm

Size · icon

Typography

We use Satoshi as our primary font. Different font weights, colors and sizes are used to create a hierarchy in the UI. Since we also use Tailwind CSS, we can easily apply these styles to our components.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph 1

Paragraph 2

Paragraph 3

AaBbCc

1234567890

Heading · with span

Paragraph · with span

Font Family

Satoshi Variable

Connect Wallet

RainbowKit serves as our connect wallet provider. It provides a simple way to connect to a wallet. It is not available in the UI Kit. Copy the code below to your project to see it in action.

providers/ConnectProvider.tsx

page.tsx

Code

Code snippets are used to display code examples in the documentation. They are styled with a light theme and can be copied to your clipboard.

Snippet · with filename

code.tsx

Snippet · without filename

Dialog

Dialog is a modal window that appears in front of app content to provide critical info or input from the user. It disables the rest of the app until the user interacts with it. Dialog is paired with Drawer for mobile devices.

ResponsiveDialog is a component that displays a dialog on desktop and a drawer on mobile devices.

components/responsiveDialog.tsx

If you want to use a dialog on both desktop and mobile, you can use the Dialog component. However, It is not recommended to use this component on desktop devices.

components/dialog.tsx

Similarly, if you want to use a drawer on both desktop and mobile, you can use the Drawer component. These components offer more flexibility in terms of customization.

components/drawer.tsx

AlertDialog is a dialog that is used to display alerts. It interrupts the user with important content and expects a response.

components/alert-dialog.tsx

Coin

Coin is a component that displays a spinning coin. It is used to show a coin flip in a game or a coin toss. It has four states: stopped, in-progress, heads, and tails. You can also customize it further by using the className and containerClassName props. In case you want to change the duration of the animation, you can use the duration prop. However, It is not recommended to modify the duration prop.

Loaders

Loaders are components used to display a loading state. It is typically used when the content is loading or when the user is waiting for a response.

There are two types of Loaders. Bar has a wobble (back and forth) animation that is used to indicate that the page content is loading. The second type is a spinner that is used to indicate that the component content is loading. The default export is the spinner loader.

Loader · bar

Loader · spinner

Loader · custom

Loader · with button

Form

Forms are used to collect user input. They are used in various places like login, registration, and contact forms. The Form component is a wrapper that provides form state management and validation. It uses the react-hook-form library for form state management and zod for form validation.

Input

Input is a component that allows users to enter data. It is used in forms, modals, and dialogues, and more.