PXLKIT UI KIT FOR REACT

import { PixelButton } from '@pxlkit/ui-kit';
const Arrow = () => (
  <span aria-hidden className="inline-block h-3.5 w-3.5">→</span>
);
export function WithIcons() {
  return (
    <div className="flex flex-wrap gap-2">
      <PixelButton iconLeft={<Arrow />}>Leading</PixelButton>
      <PixelButton iconRight={<Arrow />}>Trailing</PixelButton>
      <PixelButton iconLeft={<Arrow />} iconRight={<Arrow />}>Both</PixelButton>
    </div>
  );
}

import { PxlKitButton } from '@pxlkit/ui-kit';
const StarIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
  </svg>
);
export function Default() {
  return <PxlKitButton label="Favorite" icon={<StarIcon />} />;
}

import React from 'react';
import { PixelSplitButton } from '@pxlkit/ui-kit';
export function WithCallbacks() {
  const [last, setLast] = React.useState<string>('—');
  return (
    <div className="flex flex-col items-start gap-2">
      <PixelSplitButton
        label="Save"
        tone="cyan"
        options={[
          { value: 'draft', label: 'Save as draft' },
          { value: 'template', label: 'Save as template' },
          { value: 'copy', label: 'Save a copy' },
        ]}
        onPrimary={() => setLast('primary')}
        onSelect={(v) => setLast(v)}
      />
      <span className="text-xs text-retro-muted">last action: {last}</span>
    </div>
  );
}

import { PixelInput } from '@pxlkit/ui-kit';
export function Default() {
  return (
    <PixelInput
      label="Username"
      placeholder="hero@pxlkit.xyz"
      hint="Your retro alias"
    />
  );
}

import { PixelPasswordInput } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelPasswordInput label="Password" placeholder="Enter password" />;
}

import { PixelTextarea } from '@pxlkit/ui-kit';
export function Default() {
  return (
    <PixelTextarea
      label="Notes"
      placeholder="Write something..."
      hint="Up to 280 characters."
    />
  );
}

import { PixelSelect } from '@pxlkit/ui-kit';
const FRUITS = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'date', label: 'Date' },
];
export function Default() {
  return (
    <PixelSelect
      label="Fruit"
      options={FRUITS}
      placeholder="Pick a fruit"
      hint="Choose your favorite"
    />
  );
}

import { useState } from 'react';
import { PixelCheckbox } from '@pxlkit/ui-kit';
export function Default() {
  const [checked, setChecked] = useState(false);
  return (
    <PixelCheckbox
      label="Accept terms"
      checked={checked}
      onChange={setChecked}
    />
  );
}

import { useState } from 'react';
import { PixelRadioGroup } from '@pxlkit/ui-kit';
const PLANS = [
  { value: 'free', label: 'Free' },
  { value: 'pro', label: 'Pro' },
  { value: 'team', label: 'Team' },
];
export function Default() {
  const [value, setValue] = useState('free');
  return (
    <PixelRadioGroup
      label="Plan"
      value={value}
      options={PLANS}
      onChange={setValue}
    />
  );
}

import { useState } from 'react';
import { PixelSwitch } from '@pxlkit/ui-kit';
export function Default() {
  const [on, setOn] = useState(false);
  return <PixelSwitch label="Enable notifications" checked={on} onChange={setOn} />;
}

import { useState } from 'react';
import { PixelSlider } from '@pxlkit/ui-kit';
export function Default() {
  const [value, setValue] = useState(40);
  return (
    <PixelSlider
      label="Volume"
      value={value}
      onChange={setValue}
    />
  );
}

import { useState } from 'react';
import { PixelSegmented } from '@pxlkit/ui-kit';
const VIEWS = [
  { value: 'grid', label: 'Grid' },
  { value: 'list', label: 'List' },
  { value: 'kanban', label: 'Kanban' },
];
export function Default() {
  const [value, setValue] = useState('grid');
  return (
    <PixelSegmented
      label="View"
      value={value}
      options={VIEWS}
      onChange={setValue}
    />
  );
}

import { PixelCard } from '@pxlkit/ui-kit';
export function WithFooter() {
  return (
    <PixelCard
      title="Invoice #1042"
      footer={<span className="text-xs text-retro-muted">Due in 7 days</span>}
    >
      <p>Total: $1,250.00</p>
    </PixelCard>
  );
}

import { PixelStatCard } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelStatCard label="Revenue" value="$12,480" trend="+8.2% vs last week" />
}

import { PixelTable } from '@pxlkit/ui-kit';
type Row = {
  id: string;
  name: string;
  role: string;
  status: string;
};
const rows: Row[] = [
  { id: '1', name: 'Alice', role: 'Engineer', status: 'active' },
  { id: '2', name: 'Bob', role: 'Designer', status: 'idle' },
  { id: '3', name: 'Carol', role: 'PM', status: 'active' },
];
const baseColumns = [
  { key: 'name', header: 'Name' },
  { key: 'role', header: 'Role' },
  { key: 'status', header: 'Status' },
];
export function Default() {
  return <PixelTable<Row> columns={baseColumns} data={rows} />;
}

import { PixelAvatar } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelAvatar name="Joangel De La Rosa" />;
}

import { PixelBadge } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelBadge>NEW</PixelBadge>;
}

import { useState } from 'react';
import { PixelChip } from '@pxlkit/ui-kit';
export function Deletable() {
  const [visible, setVisible] = useState(true);
  if (!visible) return null;
  return (
    <PixelChip
      label="Remove me"
      tone="red"
      onDelete={() => setVisible(false)}
    />
  );
}

import { PixelTextLink } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelTextLink href="https://pxlkit.xyz">Read the docs</PixelTextLink>;
}

import { PixelCodeInline } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelCodeInline>npm install</PixelCodeInline>;
}

import { PixelKbd } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelKbd>Enter</PixelKbd>;
}

import { PixelColorSwatch } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelColorSwatch name="cyan" cssVar="--color-retro-cyan" />;
}

import { PixelAlert, PixelButton } from '@pxlkit/ui-kit';
const InfoIcon = () => (
  <span
    aria-hidden
    style={{
      width: 14,
      height: 14,
      borderRadius: 9999,
      background: 'currentColor',
      display: 'inline-block',
    }}
  />
);
export function WithAction() {
  return (
    <PixelAlert
      tone="red"
      title="Connection lost"
      message="We couldn't reach the server. Check your network and retry."
      icon={<InfoIcon />}
      action={
        <PixelButton size="sm" tone="red" variant="outline">
          Retry
        </PixelButton>
      }
    />
  );
}

import { PixelProgress } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelProgress value={60} label="HP" />;
}

import { PixelSkeleton } from '@pxlkit/ui-kit';
export function Default() {
  return <PixelSkeleton width="12rem" height="1rem" />;
}

import { PixelEmptyState, PixelButton } from '@pxlkit/ui-kit';
const FolderIcon = () => (
  <span
    aria-hidden
    style={{
      width: 32,
      height: 32,
      borderRadius: 4,
      border: '2px solid currentColor',
      display: 'inline-block',
    }}
  />
);
export function WithIconAndAction() {
  return (
    <PixelEmptyState
      icon={<FolderIcon />}
      title="No documents"
      description="Upload a file or create a new document to begin."
      action={
        <PixelButton size="sm" tone="green" variant="solid">
          Create document
        </PixelButton>
      }
    />
  );
}

import { PixelToast } from '@pxlkit/ui-kit';
import type { ToastItem } from '@pxlkit/ui-kit';
const noop = () => {};
const baseToast = (overrides: Partial<ToastItem> = {}): ToastItem => ({
  id: 'demo',
  title: 'Saved',
  message: 'Your changes have been persisted.',
  tone: 'cyan',
  duration: 0,
  ...overrides,
});
export function Default() {
  return <PixelToast toast={baseToast()} onDismiss={noop} />;
}

import React from 'react';
import { PxlKitToastProvider, useToast, PixelButton } from '@pxlkit/ui-kit';
function TriggerRow({ children }: { children: React.ReactNode }) {
  return <div className="flex flex-wrap gap-2">{children}</div>;
}
function DefaultTriggers() {
  const { toast } = useToast();
  return (
    <TriggerRow>
      <PixelButton size="sm" onClick={() => toast({ title: 'Saved', message: 'Your changes were persisted.' })}>
        Push toast
      </PixelButton>
    </TriggerRow>
  );
}
export function Default() {
  return (
    <PxlKitToastProvider>
      <DefaultTriggers />
    </PxlKitToastProvider>
  );
}

import { PixelTabs } from '@pxlkit/ui-kit';
import type { TabItem } from '@pxlkit/ui-kit';
const ITEMS: TabItem[] = [
  { id: 'overview', label: 'Overview', content: <p>High-level summary of the project.</p> },
  { id: 'activity', label: 'Activity', content: <p>Recent events and commits.</p> },
  { id: 'settings', label: 'Settings', content: <p>Configuration for this workspace.</p> },
];
export function Default() {
  return <PixelTabs items={ITEMS} defaultValue="overview" />;
}

import { PixelAccordion } from '@pxlkit/ui-kit';
const SAMPLE_ITEMS = [
  {
    id: 'overview',
    title: 'Overview',
    content: 'Introductory section that opens by default.',
  },
  {
    id: 'details',
    title: 'Details',
    content: 'Secondary section with extended copy.',
  },
  {
    id: 'faq',
    title: 'FAQ',
    content: 'Common questions and short answers.',
  },
];
export function Default() {
  return <PixelAccordion items={SAMPLE_ITEMS} />;
}

import { PixelCollapsible } from '@pxlkit/ui-kit';
export function Default() {
  return (
    <PixelCollapsible label="Show details">
      <p className="text-xs text-retro-muted">
        Hidden content revealed when the header is toggled.
      </p>
    </PixelCollapsible>
  );
}

import { PixelBreadcrumb } from '@pxlkit/ui-kit';
const TRAIL = [
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs' },
  { label: 'Components', href: '/docs/components' },
  { label: 'Breadcrumb', active: true },
];
export function Default() {
  return <PixelBreadcrumb items={TRAIL} />;
}

import { useState } from 'react';
import { PixelPagination } from '@pxlkit/ui-kit';
export function Default() {
  const [page, setPage] = useState(1);
  return <PixelPagination page={page} total={10} onChange={setPage} />;
}

import { useState } from 'react';
import { PixelModal, PixelButton } from '@pxlkit/ui-kit';
export function Default() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <PixelButton onClick={() => setOpen(true)}>Open modal</PixelButton>
      <PixelModal open={open} onClose={() => setOpen(false)} title="Default modal">
        <p>This is a minimal modal with title and body content.</p>
      </PixelModal>
    </>
  );
}

import { PixelTooltip, PixelButton } from '@pxlkit/ui-kit';
export function Default() {
  return (
    <PixelTooltip label="Save your changes">
      <PixelButton>Save</PixelButton>
    </PixelTooltip>
  );
}