Skip to main content

​
Overview

The Crocante platform provides a comprehensive set of reusable UI components. All components are fully typed with TypeScript and follow consistent design patterns.

​
Button

Flexible button component with multiple variants and loading states.

​
Props

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  isLoading?: boolean;
  className?: string;
  isActive?: boolean;
}

type ButtonVariant =
  | "primary"
  | "secondary"
  | "tertiary"
  | "outline"
  | "outline-secondary"
  | "nav"
  | "avatar-outline";

​
Usage

import { Button } from "@/components";

<Button variant="primary" onClick={handleSubmit}>
  Submit
</Button>

​
Features

  • Loading State: Displays spinner when isLoading is true
  • Variants: 7 different visual styles
  • Active State: Special highlighting for navigation
  • Disabled State: Automatic styling for disabled buttons

​
Input

Versatile input component with validation, icons, and password visibility toggle.

​
Props

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  type?: "text" | "email" | "password" | "number";
  label?: string;
  noEdit?: boolean;
  max?: number;
  onMaxClick?: () => void;
  validation?: "invalid" | "success" | null;
  validationMessage?: string;
  secondaryLabel?: string;
  secondaryLabelAlign?: "left" | "right";
  complexLabel?: {
    leftText: string;
    icon: React.ReactNode;
    rightText: string;
    align?: "left" | "right";
    tooltip?: string;
  };
  leftIcon?: React.ReactNode;
  noBottomSpace?: boolean;
}

​
Usage

import { Input } from "@/components";

<Input
  label="Email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  placeholder="[email protected]"
/>

​
Features

  • Password Toggle: Eye icon to show/hide password
  • Validation States: Success and error states with icons
  • Max Button: Quick fill with maximum value
  • Left Icon: Support for icon prefix
  • Secondary Label: Additional context below input

​
Select

Dropdown select component with icon support.

​
Props

interface SelectOption {
  id: string;
  label: string;
  icon?: React.ReactNode;
  value?: string;
}

interface SelectorProps {
  selectedIndex: number;
  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  options: Array<SelectOption>;
}

interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  label: string;
  className?: string;
  secondaryLabel?: string;
  secondaryLabelAlign?: "left" | "right";
  block?: boolean;
  properties: SelectorProps;
}

​
Usage

import { Select } from "@/components";

const options = [
  { id: "btc", label: "Bitcoin" },
  { id: "eth", label: "Ethereum" },
  { id: "usdc", label: "USD Coin" }
];

<Select
  label="Select Token"
  properties={{
    selectedIndex: 0,
    options,
    onChange: handleTokenChange
  }}
/>
Flexible modal component with responsive design and portal rendering.

​
Props

interface ModalProps {
  title: string;
  icon?: React.ReactNode;
  statusIcon?: React.ReactNode;
  open: boolean;
  onClose: () => void;
  children: React.ReactNode;
  className?: string;
  actions?: () => React.ReactNode;
  blockClose?: boolean;
}

​
Usage

import { Modal } from "@/components";

<Modal
  title="Transfer Funds"
  open={isOpen}
  onClose={handleClose}
>
  <p>Enter transfer details:</p>
  <Input label="Amount" />
  <Input label="Recipient" />
</Modal>

​
Features

  • Portal Rendering: Renders in document.body
  • Responsive: Bottom sheet on mobile, centered on desktop
  • Backdrop Click: Close on backdrop click (unless blocked)
  • Custom Actions: Footer action buttons
  • Icons: Title icon and status icon support

​
Table

Advanced table component with filtering, sorting, and responsive scrolling.

​
Props

interface TableHeader {
  id: string;
  label: string;
  className?: string;
}

interface TableCell {
  id: string;
  value?: string;
  subtitle?: string;
  highlight?: boolean;
  className?: string;
  leftIcon?: () => React.ReactNode;
}

interface TableRow {
  id: string;
  cells: TableCell[];
  className?: string;
  onClick?: () => void;
}

interface TableProps {
  tableHeaders: TableHeader[];
  rows: TableRow[];
  filters?: TableFiltersProps;
  isLoading?: boolean;
  className?: string;
}

​
Usage

import { Table } from "@/components";

const headers = [
  { id: "date", label: "Date" },
  { id: "type", label: "Type" },
  { id: "amount", label: "Amount", className: "text-right" }
];

const rows = [
  {
    id: "1",
    cells: [
      { id: "date", value: "2026-03-12" },
      { id: "type", value: "Deposit" },
      { id: "amount", value: "1,000.00", highlight: true }
    ],
    onClick: () => handleRowClick("1")
  }
];

<Table tableHeaders={headers} rows={rows} />

​
Features

  • Responsive Scrolling: Horizontal scroll on mobile with arrow navigation
  • Vertical Scrolling: Smooth scrolling with up/down indicators
  • Loading State: Skeleton placeholder during data fetch
  • Row Click: Interactive rows with hover states
  • Cell Formatting: Subtitles, highlights, and icons

​
Card

Simple card container component.

​
Props

interface CardProps {
  leftIcon?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
  variant?: "default" | "fund";
}

​
Usage

import { Card } from "@/components";

<Card>
  <h3>Portfolio Value</h3>
  <p>$125,000.00</p>
</Card>

​
Tabs

Tab navigation component.

​
Props

interface TabsProps {
  TabValues: Record<string, string>;
  selectedRow?: string;
  onChange?: (selectedRow: string) => void;
}

​
Usage

import { Tabs } from "@/components";

const tabValues = {
  portfolio: "Portfolio",
  activity: "Activity",
  staking: "Staking"
};

<Tabs
  TabValues={tabValues}
  selectedRow={activeTab}
  onChange={setActiveTab}
/>

​
Tooltip

Contextual tooltip component with multiple positions and variants.

​
Props

type TooltipPosition = "top" | "bottom" | "left" | "right" | "auto";
type TooltipVariant = "default" | "info" | "warning" | "error" | "success";

interface TooltipProps {
  content: React.ReactNode;
  children: React.ReactNode;
  position?: TooltipPosition;
  variant?: TooltipVariant;
  delay?: number;
  disabled?: boolean;
  className?: string;
  trigger?: "hover" | "click" | "focus";
}

​
Usage

import { Tooltip } from "@/components";

<Tooltip content="This is a helpful tooltip">
  <button>Hover me</button>
</Tooltip>

​
Features

  • Auto-positioning: Automatically positions to stay in viewport
  • Multiple Variants: Different colors for different contexts
  • Trigger Options: Hover, click, or focus
  • Configurable Delay: Control tooltip show delay

​
Skeleton

Loading placeholder component.

​
Props

interface SkeletonProps {
  lines?: number;
}

​
Usage

import { Skeleton } from "@/components";

{isLoading ? (
  <Skeleton lines={3} />
) : (
  <Content />
)}

​
Next Steps

Custom Hooks

Learn about React hooks

Context Providers

Understand context providers

Build docs developers (and LLMs) love

Get started for freeTalk to us