Web3UI Components

A modern UI component library for web3 applications, built with React and Tailwind CSS.

Installation

npm install sarthak-web3ui-components
# or
yarn add sarthak-web3ui-components
# or
pnpm add sarthak-web3ui-components

Usage

Import the CSS styles in your main application file:

import 'sarthak-web3ui-components/dist/styles.css';

Then import and use components in your React components:

import { Button, ChainSelector } from 'sarthak-web3ui-components';

export default function MyComponent() {
  return (
    <div>
      <Button variant="primary">Connect Wallet</Button>
      <ChainSelector 
        chains={[
          { id: 1, name: 'Ethereum', icon: '/eth.png' },
          { id: 137, name: 'Polygon', icon: '/polygon.png' }
        ]}
        onSelect={(chain) => console.log('Selected chain:', chain)}
      />
    </div>
  );
}

Available Components

• Button: Versatile button component with multiple variants
• ChainSelector: Dropdown component for selecting blockchain networks
• Chart: Interactive price/data chart component
• Data: Various data display components
• Input: Form input components
• Modal: Modal dialog components
• SelectToken: Token selection components
• Skeleton: Loading skeleton components
• Stepper: Multi-step process component
• Toast: Notification toast components
• TokenAvatar: Token icon/avatar components
• TokenCard: Token card display components
• WalletDetails: Wallet information components

Themes

The library supports light and dark themes. You can use the next-themes package to implement theme switching functionality in your application.

License

MIT