@lendliq/ui

Reusable React components for DeFi applications. Built with TailwindCSS and designed for dark mode support.

Installation

npm install @lendliq/ui
# or
yarn add @lendliq/ui
# or
pnpm add @lendliq/ui

Requirements

• React 18+
• TailwindCSS (for styling)

Setup

Add the following to your tailwind.config.js to enable the custom colors used by the components:

module.exports = {
  // ... other config
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
      },
      backgroundImage: {
        'gradient-primary': 'linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%)',
      },
    },
  },
};

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from '@lendliq/ui';

<Button variant="primary" size="md">
  Connect Wallet
</Button>

<Button variant="outline" isLoading>
  Processing...
</Button>

<Button variant="danger" fullWidth>
  Disconnect
</Button>

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
• size: 'sm' | 'md' | 'lg'
• isLoading: Shows loading spinner
• fullWidth: Makes button full width

Card

Container component with optional hover effects.

import { Card, CardHeader, CardFooter } from '@lendliq/ui';

<Card padding="md" hover>
  <CardHeader
    title="Swap"
    subtitle="Trade tokens instantly"
    action={<Button size="sm">Settings</Button>}
  />
  {/* Card content */}
  <CardFooter>
    <Button fullWidth>Swap</Button>
  </CardFooter>
</Card>

Spinner & Loader

Loading indicators for async operations.

import { Spinner, Loader } from '@lendliq/ui';

<Spinner size="md" color="primary" />

<Loader text="Loading pools..." fullScreen />

TokenIcon

Display token icons with fallback support.

import { TokenIcon, TokenPairIcon } from '@lendliq/ui';

<TokenIcon
  symbol="ETH"
  logoUrl="https://..."
  size="md"
/>

<TokenPairIcon
  token0Symbol="ETH"
  token1Symbol="USDT"
  token0LogoUrl="https://..."
  token1LogoUrl="https://..."
  size="lg"
/>

Skeleton

Loading placeholder components.

import { Skeleton, SkeletonText, SkeletonCard, SkeletonTable } from '@lendliq/ui';

<Skeleton height="2rem" width="100%" />

<Skeleton circle width={40} height={40} />

<SkeletonText lines={3} />

<SkeletonCard />

<SkeletonTable rows={5} columns={4} />

Alert & Banner

Notification components for user feedback.

import { Alert, Banner } from '@lendliq/ui';

<Alert type="success" title="Transaction Confirmed">
  Your swap was successful!
</Alert>

<Alert type="error" onClose={() => {}}>
  Insufficient balance
</Alert>

<Banner type="warning" onClose={() => {}}>
  Network congestion detected
</Banner>

Types: 'info' | 'success' | 'warning' | 'error'

TickInput

Numeric input with increment/decrement buttons for tick-based inputs.

import { TickInput } from '@lendliq/ui';

<TickInput
  value={price}
  onChange={setPrice}
  onIncrement={() => adjustTick(1)}
  onDecrement={() => adjustTick(-1)}
  onBlur={alignToNearestTick}
  label="Min Price"
  sublabel="USDT per ETH"
/>

Dark Mode

All components support dark mode out of the box. They use Tailwind's dark: variants and will automatically adapt to your application's dark mode setting.

License

MIT