Installation

Install and configure W3-Kit for your Web3 application. W3-Kit follows the shadcn/ui patterns for seamless integration.

Prerequisites

Before you begin, ensure your project meets these requirements:

• Frameworks: Next.js, Vite, Remix, or Laravel
• Required: React 18+ and Tailwind CSS
• Recommended: TypeScript for better developer experience

Create Project

Start a new project with the shadcn CLI. This sets up your project with customizable styles and configurations:

npx shadcn@latest init

Or use the new create command for an interactive setup with more customization options:

npx shadcn@latest create

The create command allows you to customize:

• Component library (Radix UI or Base UI)
• Visual style presets
• Base color scheme
• Fonts and icons

Visual Style Presets

Choose from 5 visual styles to match your design system:

• Vega – The classic shadcn/ui look
• Nova – Reduced padding and margins for compact layouts
• Maia – Soft and rounded, with generous spacing
• Lyra – Boxy and sharp, pairs well with mono fonts
• Mira – Compact, made for dense interfaces

Add W3-Kit Components

Once your project is set up, add Web3 components using the W3-Kit CLI. For example, to add the NFT Collection Grid:

npx w3-kit@latest add nft-collection-grid

This command will:

• Create a components/ui directory in your project
• Copy the selected component to components/ui/nft-collection-grid
• Create a config directory and copy the tokens.ts file
• Add all necessary dependencies to your package.json

Useful CLI Commands

The shadcn CLI provides additional commands to help you manage components:

npx shadcn@latest view button

npx shadcn@latest search

npx shadcn@latest list

npx shadcn@latest diff

Migration Guide

If you have an existing project using the old @radix-ui/react-* packages, you can migrate to the new unified radix-ui package:

npx shadcn@latest migrate radix

This command will:

• Replace all @radix-ui/react-* imports with radix-ui
• Update your UI components automatically
• Install the new radix-ui package as a dependency

Example Usage

After adding a component, import and use it in your code:

import { NFTCollectionGrid } from '@/components/ui/nft-collection-grid'

export default function Home() { return ( <div> <NFTCollectionGrid /> </div> ) }