@dexpal-analytics/ui

A collection of reusable, accessible UI components built with Radix UI primitives and styled with Tailwind CSS. Designed for DeFi applications but usable in any React project.

Features

• 🎨 Modern Design: Clean, professional components with Tailwind CSS
• ♿ Accessible: Built on Radix UI primitives for WCAG compliance
• 📦 Tree-shakeable: Import only what you need
• 🎯 TypeScript: Full type safety
• 🔧 Customizable: Easy to override styles with className
• ⚡ Lightweight: Minimal bundle size

Installation

npm install @dexpal-analytics/ui
# or
yarn add @dexpal-analytics/ui

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "lucide-react": "^0.300.0"
}

Components

Button

import { Button } from '@dexpal-analytics/ui';

<Button variant="default">Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Variants: default, destructive, outline, secondary, ghost, link
Sizes: default, sm, lg, icon

Input

import { Input } from '@dexpal-analytics/ui';
import { Search } from 'lucide-react';

<Input placeholder="Enter text..." />
<Input type="email" placeholder="Email" />
<Input startIcon={Search} placeholder="Search..." />

Select

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@dexpal-analytics/ui';

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>;

Table

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from '@dexpal-analytics/ui';

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Value</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Item 1</TableCell>
      <TableCell>$100</TableCell>
    </TableRow>
  </TableBody>
</Table>;

ScrollArea

import { ScrollArea, ScrollBar } from '@dexpal-analytics/ui';

<ScrollArea className="h-[200px] w-[350px]">
  {/* Your content */}
  <ScrollBar orientation="horizontal" />
</ScrollArea>;

Tooltip

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@dexpal-analytics/ui';

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

ToggleGroup

import { ToggleGroup, ToggleGroupItem } from '@dexpal-analytics/ui';

<ToggleGroup type="single" value={value} onValueChange={setValue}>
  <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
  <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
</ToggleGroup>;

Pagination

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
} from '@dexpal-analytics/ui';

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        1
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>;

Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@dexpal-analytics/ui';

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>;

Alert Dialog

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

<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>;

Badge

import { Badge } from '@dexpal-analytics/ui';

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>;

Calendar

import { Calendar } from '@dexpal-analytics/ui';

<Calendar mode="single" selected={date} onSelect={setDate} />;

Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@dexpal-analytics/ui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    {/* Card content */}
  </CardContent>
</Card>;

Carousel

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@dexpal-analytics/ui';

<Carousel>
  <CarouselContent>
    <CarouselItem>1</CarouselItem>
    <CarouselItem>2</CarouselItem>
    <CarouselItem>3</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>;

Chart

import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@dexpal-analytics/ui';

<ChartContainer config={chartConfig}>
  <BarChart data={chartData}>
    <Bar dataKey="value" fill="var(--color-value)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>;

Checkbox

import { Checkbox } from '@dexpal-analytics/ui';

<Checkbox id="terms" />;

Command

import { Command, CommandInput, CommandList, CommandItem } from '@dexpal-analytics/ui';

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandItem>Item 1</CommandItem>
    <CommandItem>Item 2</CommandItem>
  </CommandList>
</Command>;

Dialog

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@dexpal-analytics/ui';

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    {/* Dialog content */}
  </DialogContent>
</Dialog>;

Dropdown Menu

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@dexpal-analytics/ui';

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;

Label

import { Label } from '@dexpal-analytics/ui';

<Label htmlFor="email">Email</Label>;

Popover

import { Popover, PopoverContent, PopoverTrigger } from '@dexpal-analytics/ui';

<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>Popover content</PopoverContent>
</Popover>;

Progress

import { Progress } from '@dexpal-analytics/ui';

<Progress value={50} />;

Sheet

import { Sheet, SheetContent, SheetTrigger } from '@dexpal-analytics/ui';

<Sheet>
  <SheetTrigger>Open Sheet</SheetTrigger>
  <SheetContent>
    {/* Sheet content */}
  </SheetContent>
</Sheet>;

Tabs

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@dexpal-analytics/ui';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>;

Textarea

import { Textarea } from '@dexpal-analytics/ui';

<Textarea placeholder="Type your message here." />;

Toast

import { Toast } from '@dexpal-analytics/ui';

<Toast>
  <ToastTitle>Toast Title</ToastTitle>
  <ToastDescription>Toast description</ToastDescription>
</Toast>;

Utilities

cn (Class Name Merger)

Utility for merging Tailwind classes:

import { cn } from '@dexpal-analytics/ui/lib';

const className = cn('base-class', condition && 'conditional-class', 'override-class');

formatBigDollarAmounts

Format large numbers with K/M/B suffixes:

import { formatBigDollarAmounts } from '@dexpal-analytics/ui/lib';

formatBigDollarAmounts(1500); // "$1.5K"
formatBigDollarAmounts(2500000); // "$3M"
formatBigDollarAmounts(1200000000); // "$1B"

formatShortDate

Format dates in short format:

import { formatShortDate } from '@dexpal-analytics/ui/lib';

formatShortDate('2024-01-15'); // "Jan 15, 2024"

formatPercentage

Format numbers as percentages:

import { formatPercentage } from '@dexpal-analytics/ui/lib';

formatPercentage(12.5); // "12.50%"
formatPercentage(12.5, 1); // "12.5%"

Styling

This library uses Tailwind CSS. Ensure Tailwind is configured in your project:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@dexpal-analytics/ui/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Customization

All components accept a className prop for custom styling:

<Button className="custom-class">Custom Button</Button>

You can also override the default theme by modifying Tailwind's configuration.

TypeScript

Full TypeScript support with exported types:

import type { ButtonProps } from '@dexpal-analytics/ui';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};