Nocturne Wallet UI Components
npm install nocturne-wallet-uibash
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 (
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