nocturne-wallet-cli

Add Nocturne UI components to your project - shadcn/ui style.

Components are copied directly into your project, so you can customize them.

Installation

npx nocturne-wallet-ui init

Usage

Add components

# Add specific components
npx nocturne-wallet-ui add button card input

# Add all components
npx nocturne-wallet-ui add --all

# Interactive mode
npx nocturne-wallet-ui add

List available components

npx nocturne-wallet-ui list

Components

Primitives

• button - Customizable button with variants
• card - Card container with header/footer
• input - Form input with label and error states
• sheet - Slide-out panel (dialog)
• tabs - Tab navigation
• dropdown-menu - Dropdown menu
• spinner - Loading spinner
• logo - Nocturne logo
• blockie-avatar - Ethereum blockie avatar
• search-input - Search input field

Features

• activity - Transaction history page
• tokens - Token list page
• send - Send tokens panel
• receive - Receive panel with QR codes
• swap - Token swap interface
• settings - Settings panels
• onboarding - Welcome, unlock, create/import wallet
• dashboard - Complete dashboard layout
• dapp - DApp connection/approval screens

Example

# 1. Initialize
npx nocturne-wallet-ui init

# 2. Add button component
npx nocturne-wallet-ui add button

# 3. Install dependencies
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge

# 4. Use in your code

import { Button } from '@/components/ui/button';

export default function App() {
  return (
    <Button variant="primary">Click me</Button>
  );
}

File Structure

After adding components:

src/
└── components/
    └── ui/
        ├── lib/
        │   └── utils.ts       # cn() utility
        ├── button.tsx
        ├── card.tsx
        ├── input.tsx
        └── ...

Customization

Since files are copied to your project, you can edit them directly:

// src/components/ui/button.tsx
const buttonVariants = cva(
  "...",
  {
    variants: {
      variant: {
        // Add your custom variant
        brand: "bg-brand-500 text-white hover:bg-brand-600",
      },
    },
  }
)

License

MIT