Pocket Network UI

Getting Started

Step 1: Add shadcn

Follow the official shadcn installation guide

First, follow the installation instructions from the official shadcn documentation:

Once you've initialized shadcn in your project, return here to continue with the Pocket Network UI setup.

Step 2: Add Theme

Add Pocket Network's theme and components

npx shadcn-ui@latest add /r/theme.json

Button

Customizable button component

npx shadcn-ui@latest add /r/button.json

Card

Flexible card component

npx shadcn-ui@latest add /r/card.json

Code

Code block with tabs and copy-to-clipboard

npx shadcn-ui@latest add /r/code.json

Logo

Pocket Network logo component

npx shadcn-ui@latest add /r/logo.json

PoktIcon

Pocket Network icon component

npx shadcn-ui@latest add /r/pokt-icon.json

Tabs

Tabbed navigation component

npx shadcn-ui@latest add /r/tabs.json

Simple Card

Card description

Card content goes here.

Card with Action

With a button

With tabs

Code 1 here

Without tabs

Your code here

Content for Tab 1

Icon

Default:

Black:

White:

Full (Default)

Default:

Black:

White: