Skip to main content

Component Categories

@xond/ui components are organized into logical categories. Each category serves a specific purpose in building applications.

Base Components​

Fundamental building blocks used throughout applications.

Button​

Primary action component with multiple variants and sizes.

import { Button } from "@xond/ui";

<Button variant="primary" size="md" onClick={handleClick}>
  Submit
</Button>

Variants: primary, secondary, danger, success
Sizes: sm, md, lg

Alert​

Display messages, warnings, and errors.

import { Alert } from "@xond/ui";

<Alert type="error" message="Something went wrong" />

Types: info, success, warning, error

Navigation link component with routing support.

import { Link } from "@xond/ui";

<Link to="/dashboard">Go to Dashboard</Link>

Image​

Image component with loading states and fallbacks.

import { Image } from "@xond/ui";

<Image src="/logo.png" alt="Logo" />

Notification​

Toast notifications (requires NotificationProvider).

import { useNotification } from "@xond/ui";

const { showNotification } = useNotification();
showNotification({ type: "success", message: "Saved!" });

SpinnerIcon & Spinning​

Loading indicators.

import { SpinnerIcon, Spinning } from "@xond/ui";

<SpinnerIcon />
<Spinning />

Elements​

UI primitives and visual elements.

Badge​

Status indicators and labels.

import { Badge } from "@xond/ui";

<Badge color="green">Active</Badge>

Colors: gray, red, yellow, green, blue, indigo, purple, pink

Navigation breadcrumb trail.

import { Breadcrumb } from "@xond/ui";

<Breadcrumb items={[
  { label: "Home", href: "/" },
  { label: "Users", href: "/users" },
  { label: "John Doe" }
]} />

Application logo component.

import { Logo } from "@xond/ui";

<Logo src="/logo.png" alt="Company Logo" href="/" />

SvgIcon​

SVG icon component with predefined icon types.

import { SvgIcon } from "@xond/ui";

<SvgIcon type="deposit" size={24} />

Types: deposit, withdraw, send, receive, shop, bill, spend, overbook

Switcher & ButtonSwitch​

Toggle switches and button toggles.

import { Switcher, ButtonSwitch } from "@xond/ui";

<Switcher checked={enabled} onChange={setEnabled} />
<ButtonSwitch options={["Option 1", "Option 2"]} />

TreePath​

Display object tree structures.

import { TreePath } from "@xond/ui";

<TreePath data={{ user: { name: "John", age: 30 } }} />

Inputs​

Form controls integrated with React Hook Form.

TextInput​

Single-line and multi-line text inputs.

import { TextInput, LongTextInput } from "@xond/ui";
import { useForm } from "react-hook-form";

const { register } = useForm();

<TextInput label="Name" {...register("name")} />
<LongTextInput label="Description" {...register("description")} />

NumberInput, MoneyInput, PercentInput​

Numeric inputs with formatting.

import { NumberInput, MoneyInput, PercentInput } from "@xond/ui";

<NumberInput label="Quantity" {...register("quantity")} />
<MoneyInput label="Price" {...register("price")} currency="USD" />
<PercentInput label="Discount" {...register("discount")} />

DateInput​

Date picker input.

import { DateInput } from "@xond/ui";

<DateInput label="Birth Date" {...register("birthDate")} />

Select Components​

Various select input types.

import { 
  SimpleSelectInput, 
  SearchSelect, 
  RemoteSelectInput 
} from "@xond/ui";

<SimpleSelectInput 
  label="Status" 
  options={["Active", "Inactive"]} 
  {...register("status")} 
/>

<SearchSelect
  label="User"
  dataSource={userDataSource}
  {...register("userId")}
/>

<RemoteSelectInput
  label="Product"
  endpoint="/api/products"
  {...register("productId")}
/>

File Inputs​

File upload components.

import { FileInput, ImageFileInput, DocumentFileInput } from "@xond/ui";

<FileInput label="Upload File" {...register("file")} />
<ImageFileInput label="Profile Picture" {...register("avatar")} />
<DocumentFileInput label="Document" {...register("document")} />

Specialized Inputs​

import { 
  EmailInput, 
  PhoneInput, 
  PasswordInput, 
  UUIDInput,
  PinCodeInput 
} from "@xond/ui";

<EmailInput label="Email" {...register("email")} />
<PhoneInput label="Phone" {...register("phone")} />
<PasswordInput label="Password" {...register("password")} />
<UUIDInput label="ID" {...register("id")} />
<PinCodeInput length={6} {...register("pin")} />

ToggleInput & RadioGroup​

Toggle and radio button groups.

import { ToggleInput, RadioGroup } from "@xond/ui";

<ToggleInput label="Enable" {...register("enabled")} />
<RadioGroup 
  label="Gender" 
  options={["Male", "Female"]} 
  {...register("gender")} 
/>

Layouts​

Structural components for page organization.

PageContainer​

Main page wrapper with consistent spacing.

import { PageContainer } from "@xond/ui";

<PageContainer>
  <h1>Page Title</h1>
  {/* Page content */}
</PageContainer>

Modal & SlideOver​

Dialog components.

import { Modal, SlideOver } from "@xond/ui";

<Modal open={isOpen} onClose={() => setIsOpen(false)}>
  <h2>Modal Title</h2>
  {/* Modal content */}
</Modal>

<SlideOver open={isOpen} onClose={() => setIsOpen(false)}>
  {/* Slide-over content */}
</SlideOver>

Tab​

Tab navigation component.

import { Tab } from "@xond/ui";

<Tab
  tabs={[
    { id: "1", label: "Tab 1", content: <div>Content 1</div> },
    { id: "2", label: "Tab 2", content: <div>Content 2</div> },
  ]}
/>

MobileHeader​

Mobile application header.

import { MobileHeader } from "@xond/ui";

<MobileHeader 
  name="John Doe" 
  title="Dashboard" 
  image="/avatar.png" 
/>

SeparatorBox​

Box with separator styling.

import { SeparatorBox } from "@xond/ui";

<SeparatorBox>
  {/* Content */}
</SeparatorBox>

Navigation components for app structure.

BottomNavigation​

Mobile bottom navigation bar.

import { BottomNavigation } from "@xond/ui";

<BottomNavigation
  items={[
    { id: "1", label: "Home", icon: HomeIcon, href: "/" },
    { id: "2", label: "Profile", icon: UserIcon, href: "/profile" },
  ]}
/>

SimpleSideNavigation​

Sidebar navigation.

import { SimpleSideNavigation } from "@xond/ui";

<SimpleSideNavigation
  items={[
    { id: "1", name: "Dashboard", href: "/dashboard" },
    { id: "2", name: "Users", href: "/users" },
  ]}
/>

MobileNavigation​

Mobile navigation drawer.

import { MobileNavigation } from "@xond/ui";

<MobileNavigation
  items={navigationItems}
  open={isOpen}
  onClose={() => setIsOpen(false)}
/>

ContextMenu​

Context menu component.

import { ContextMenu } from "@xond/ui";

<ContextMenu
  items={[
    { label: "Edit", onClick: handleEdit },
    { label: "Delete", onClick: handleDelete },
  ]}
/>

Table Components​

Data display and manipulation components.

Table​

Data table with sorting, filtering, and pagination.

import { Table } from "@xond/ui";
import { RemoteDataSource } from "@xond/ui";

const dataSource = new RemoteDataSource({
  endpoint: "/api/users",
});

<Table
  dataSource={dataSource}
  columns={userColumns}
  model={userModel}
/>

Form​

Dynamic form generator from model definitions.

import { Form } from "@xond/ui";

<Form
  model={formModel}
  onSubmit={handleSubmit}
  initialValues={initialData}
/>

View​

Display component for viewing entity details.

import { View } from "@xond/ui";

<View
  model={viewModel}
  data={entityData}
/>

Paging​

Pagination controls.

import { Paging } from "@xond/ui";

<Paging
  currentPage={1}
  totalPages={10}
  onPageChange={handlePageChange}
/>

Toolbar​

Table toolbar with actions.

import { Toolbar } from "@xond/ui";

<Toolbar
  actions={[
    { label: "Add", onClick: handleAdd },
    { label: "Export", onClick: handleExport },
  ]}
/>

View Components​

Display components for showing data.

ValueView​

Display formatted values.

import { ValueView } from "@xond/ui";

<ValueView value={user.name} label="Name" />

EntityCard​

Card component for displaying entity information.

import { EntityCard } from "@xond/ui";

<EntityCard
  title="User"
  fields={[
    { label: "Name", value: user.name },
    { label: "Email", value: user.email },
  ]}
/>

EncodedImageView & EncodedDocumentView​

Display encoded images and documents.

import { EncodedImageView, EncodedDocumentView } from "@xond/ui";

<EncodedImageView encoded={base64Image} />
<EncodedDocumentView encoded={base64Document} />

AmountInWordsView​

Display numbers as words (e.g., "One Thousand").

import { AmountInWordsView } from "@xond/ui";

<AmountInWordsView amount={1000} currency="USD" />

Dashboard Components​

Dashboard-specific widgets.

StatCards​

Display statistics in card format.

import { StatCards } from "@xond/ui";

<StatCards
  stats={[
    { label: "Total Users", value: 1234, trend: "+5%" },
    { label: "Revenue", value: "$50,000", trend: "+12%" },
  ]}
/>

FrequentModules​

Display frequently accessed modules.

import { FrequentModules } from "@xond/ui";

<FrequentModules
  modules={[
    { id: "1", name: "Users", icon: UserIcon, href: "/users" },
    { id: "2", name: "Reports", icon: ReportIcon, href: "/reports" },
  ]}
/>

UI Components​

Specialized UI components.

BalanceCard​

Display balance information.

import { BalanceCard } from "@xond/ui";

<BalanceCard
  label="Account Balance"
  amount={5000}
  currency="USD"
/>

Misc Components​

ScrollBox​

Scrollable container.

import { ScrollBox } from "@xond/ui";

<ScrollBox maxHeight="400px">
  {/* Scrollable content */}
</ScrollBox>

TimelineList​

Timeline display component.

import { TimelineList } from "@xond/ui";

<TimelineList
  items={[
    { date: "2024-01-01", title: "Event 1", description: "..." },
    { date: "2024-01-02", title: "Event 2", description: "..." },
  ]}
/>

Next Steps​