@nocturne/ui

Nocturne Wallet UI Components - A React component library for building wallet interfaces.

Installation

``bash
npm install @nocturne/ui

or

yarn add @nocturne/ui

or

pnpm add @nocturne/ui
`

Usage

`tsx
import { Button, Card, DashboardPage } from '@nocturne/ui';
import '@nocturne/ui/styles.css';

function App() {
return (

Click me

Hello World

);
}
`

Components

$3

- 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
- DropdownMenu - Dropdown menu
- Spinner - Loading spinner
- Logo - Nocturne logo
- BlockieAvatar - Ethereum blockie avatar
- SearchInput - Search input field

$3

- DashboardPage - Complete dashboard layout
- DashboardLayout - Dashboard shell with header/tabs
- TokensPage - Token list display
- ActivityPage - Transaction history
- SendPanel - Send tokens panel
- ReceivePanel - Receive tokens panel
- SwapPanel - Token swap panel
- SettingsPanel - Settings menu
- Welcome - Welcome/onboarding screen
- Unlock - Wallet unlock screen
- CreateWallet - Wallet creation flow
- ImportWallet` - Wallet import flow

Peer Dependencies

- React 18+ or 19+
- React DOM 18+ or 19+

License

MIT