@shogun-sdk/ui-kit

React UI components built on Radix UI primitives with Tailwind CSS for modern DeFi applications.

Quick Start

1. Install the Package

Choose your preferred package manager:

npm

npm install @shogun-sdk/ui-kit

pnpm

pnpm add @shogun-sdk/ui-kit

yarn

yarn add @shogun-sdk/ui-kit

2. Import Styles and Use Components

Import the CSS and start using components:

// Import the styles (do this once in your app)
import '@shogun-sdk/ui-kit/dist/tailwind.css';

// Import components
import { Button, Card, CardContent, CardHeader, CardTitle } from '@shogun-sdk/ui-kit';

function MySwapInterface() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Token Swap</CardTitle>
      </CardHeader>
      <CardContent>
        <Button onClick={() => console.log('Swap initiated!')}>
          Swap Tokens
        </Button>
      </CardContent>
    </Card>
  );
}

3. Explore All Components

Check the Component Examples below for detailed usage of all 30+ components.

Features

• ✅ 30+ Components - Buttons, Cards, Modals, Forms, and DeFi-specific components
• ✅ Accessibility First - Built on Radix UI primitives with full keyboard navigation
• ✅ TypeScript Support - Complete type safety and IntelliSense
• ✅ DeFi Optimized - Special components for crypto/token interfaces
• ✅ Animation Ready - Smooth animations with Framer Motion
• ✅ Customizable - Easy theming with CSS variables

Component Examples

Layout & Structure

Card

Flexible container component with header, content, and footer sections.

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@shogun-sdk/ui-kit';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Separator

Visual divider component.

import { Separator } from '@shogun-sdk/ui-kit';

<Separator />
<Separator orientation="vertical" />

Form Components

Button

Versatile button component with multiple variants and sizes.

import { Button } from '@shogun-sdk/ui-kit';

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

{/* Sizes */}
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🚀</Button>

Input

Styled input component with label support.

import { Input, Label } from '@shogun-sdk/ui-kit';

<div>
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Enter your email" />
</div>

Textarea

Multi-line text input component.

import { Textarea } from '@shogun-sdk/ui-kit';

<Textarea placeholder="Enter your message..." />

Select

Dropdown selection component.

import { 
  Select, 
  SelectContent, 
  SelectItem, 
  SelectTrigger, 
  SelectValue 
} from '@shogun-sdk/ui-kit';

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

Display Components

Avatar

User profile picture component.

import { Avatar, AvatarFallback, AvatarImage } from '@shogun-sdk/ui-kit';

<Avatar>
  <AvatarImage src="/avatar.png" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Badge

Small status or category indicator.

import { Badge } from '@shogun-sdk/ui-kit';

<Badge>New</Badge>
<Badge variant="secondary">Beta</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Draft</Badge>

Skeleton

Loading placeholder component.

import { Skeleton } from '@shogun-sdk/ui-kit';

<Skeleton className="h-4 w-full" />
<Skeleton className="h-12 w-12 rounded-full" />

Navigation & Overlays

Dialog

Modal dialog component.

import { 
  Dialog, 
  DialogContent, 
  DialogDescription, 
  DialogHeader, 
  DialogTitle, 
  DialogTrigger,
  DialogFooter 
} from '@shogun-sdk/ui-kit';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description</DialogDescription>
    </DialogHeader>
    <div>Dialog content goes here</div>
    <DialogFooter>
      <Button>Save Changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Alert Dialog

Confirmation dialog component.

import { 
  AlertDialog, 
  AlertDialogAction, 
  AlertDialogCancel, 
  AlertDialogContent, 
  AlertDialogDescription, 
  AlertDialogFooter, 
  AlertDialogHeader, 
  AlertDialogTitle, 
  AlertDialogTrigger 
} from '@shogun-sdk/ui-kit';

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Popover

Floating content container.

import { Popover, PopoverContent, PopoverTrigger } from '@shogun-sdk/ui-kit';

<Popover>
  <PopoverTrigger asChild>
    <Button>Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Popover content goes here</p>
  </PopoverContent>
</Popover>

Tooltip

Hover information component.

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@shogun-sdk/ui-kit';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

DeFi Specialized Components

Coin

Cryptocurrency coin with chain indicator.

import { Coin } from '@shogun-sdk/ui-kit';

<Coin
  imageElement={Image} // Your Image component (Next.js Image, etc.)
  tokenImage="/tokens/ethereum.png"
  chainImage="/chains/mainnet.png"
  className="w-8 h-8"
  chainIconSize={3}
/>

MoneyCounter

Animated money counter with smooth transitions.

import { MoneyCounter } from '@shogun-sdk/ui-kit';

<MoneyCounter
  targetValue={1234.56}
  duration={1000}
  maxDuration={3000}
  className="text-2xl font-bold"
  onAnimationComplete={() => console.log('Animation complete!')}
/>

Interactive Components

Accordion

Collapsible content sections.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@shogun-sdk/ui-kit';

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>
      Content for section 1
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>
      Content for section 2
    </AccordionContent>
  </AccordionItem>
</Accordion>

Dropdown Menu

Context menu component.

import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuTrigger 
} from '@shogun-sdk/ui-kit';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Animation Components

HeightAnimator

Smooth height transition wrapper.

import { HeightAnimator } from '@shogun-sdk/ui-kit';

<HeightAnimator isOpen={isExpanded}>
  <div>Content that animates in height</div>
</HeightAnimator>

ResponsiveContainer

Responsive layout container with breakpoint management.

import { ResponsiveContainer } from '@shogun-sdk/ui-kit';

<ResponsiveContainer
  mobile={<MobileComponent />}
  desktop={<DesktopComponent />}
/>

React Application Examples

Simple Swap Card

import { 
  Card, 
  CardContent, 
  CardHeader, 
  CardTitle, 
  Button, 
  Input, 
  Label 
} from '@shogun-sdk/ui-kit';

function SwapCard() {
  const [amount, setAmount] = useState('');
  
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Swap Tokens</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="amount">Amount</Label>
          <Input
            id="amount"
            type="number"
            placeholder="0.00"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
          />
        </div>
        <Button className="w-full">
          Swap
        </Button>
      </CardContent>
    </Card>
  );
}

Token Balance Display

import { Badge, Avatar, AvatarImage, AvatarFallback, MoneyCounter } from '@shogun-sdk/ui-kit';

function TokenBalance({ token, balance, usdValue }) {
  return (
    <div className="flex items-center justify-between p-4 border rounded-lg">
      <div className="flex items-center space-x-3">
        <Avatar>
          <AvatarImage src={token.image} alt={token.symbol} />
          <AvatarFallback>{token.symbol.slice(0, 2)}</AvatarFallback>
        </Avatar>
        <div>
          <p className="font-medium">{token.name}</p>
          <Badge variant="secondary">{token.symbol}</Badge>
        </div>
      </div>
      <div className="text-right">
        <p className="font-bold">{balance}</p>
        <MoneyCounter 
          targetValue={usdValue} 
          className="text-sm text-gray-500"
          prefix="$"
        />
      </div>
    </div>
  );
}

Utility Functions

cn()

Utility function for conditional class names using clsx and tailwind-merge.

import { cn } from '@shogun-sdk/ui-kit';

const className = cn(
  'base-class',
  condition && 'conditional-class',
  anotherCondition ? 'true-class' : 'false-class'
);

Styling & Theming

Import Styles

Add this to your main app file:

import '@shogun-sdk/ui-kit/dist/tailwind.css';

Custom Theming

The UI Kit uses CSS variables for theming. You can customize the appearance by overriding these variables:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

Using with Tailwind CSS

If you're already using Tailwind CSS, you can import components without the CSS and configure your own theme.

TypeScript Support

All components are fully typed with TypeScript. You can extend component props:

import type { ButtonProps } from '@shogun-sdk/ui-kit';

interface CustomButtonProps extends ButtonProps {
  loading?: boolean;
}

const CustomButton: React.FC<CustomButtonProps> = ({ loading, children, ...props }) => {
  return (
    <Button disabled={loading} {...props}>
      {loading ? 'Loading...' : children}
    </Button>
  );
};

Animation Integration

Components integrate seamlessly with Framer Motion:

import { motion } from 'framer-motion';
import { Card } from '@shogun-sdk/ui-kit';

const AnimatedCard = motion(Card);

<AnimatedCard
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>
  Animated content
</AnimatedCard>

Next.js Integration

Works perfectly with Next.js:

// pages/_app.tsx or app/layout.tsx
import '@shogun-sdk/ui-kit/dist/tailwind.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Common Patterns

Loading States

import { Button, Skeleton } from '@shogun-sdk/ui-kit';

function LoadingExample({ isLoading }) {
  return (
    <div>
      {isLoading ? (
        <Skeleton className="h-10 w-32" />
      ) : (
        <Button>Ready!</Button>
      )}
    </div>
  );
}

Form Validation

import { Input, Label, Button } from '@shogun-sdk/ui-kit';

function ValidatedForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  return (
    <div className="space-y-4">
      <div>
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className={error ? 'border-red-500' : ''}
        />
        {error && <p className="text-red-500 text-sm">{error}</p>}
      </div>
      <Button type="submit">Submit</Button>
    </div>
  );
}

Best Practices

1. Import Only What You Need - Components are tree-shakeable
2. Use Semantic HTML - Components render proper HTML elements
3. Follow Accessibility Guidelines - All components support keyboard navigation
4. Consistent Spacing - Use the built-in spacing system
5. Theme Consistency - Stick to the design tokens for colors and spacing

Dependencies

Built on top of these excellent libraries:

• @radix-ui/react-* - Accessible component primitives
• tailwindcss - Utility-first CSS framework
• framer-motion - Animation library
• class-variance-authority - Type-safe variant system
• tailwind-merge - Intelligent Tailwind class merging

Support

• GitHub Issues
• Main SDK Documentation

License

ISC