Component API Reference

import { button, buttonGroup } from '@frontmcp/ui';

// Basic
button('Click me');

// With options
button('Submit', {
  variant: 'primary',
  size: 'lg',
  type: 'submit',
});

// With HTMX
button('Load More', {
  htmx: {
    get: '/api/items?page=2',
    target: '#items',
    swap: 'beforeend',
  },
});

import {
  primaryButton,
  secondaryButton,
  outlineButton,
  ghostButton,
  dangerButton,
  linkButton,
} from '@frontmcp/ui';

// Each accepts (label, options?) and pre-applies the variant
primaryButton('Save');    // variant: 'primary'
dangerButton('Delete');   // variant: 'danger'

import { card, cardGroup } from '@frontmcp/ui';

card('<p>Card content</p>', {
  title: 'Card Title',
  subtitle: 'A brief description',
  footer: '<button>Action</button>',
  variant: 'elevated',
});

import { badge, badgeGroup } from '@frontmcp/ui';

badge('New', { variant: 'success' });
badge('Beta', { variant: 'warning', size: 'sm' });

import {
  activeBadge,
  inactiveBadge,
  pendingBadge,
  errorBadge,
  newBadge,
  betaBadge,
} from '@frontmcp/ui';

// Status badges
activeBadge();    // Green "Active"
pendingBadge();   // Yellow "Pending"
errorBadge();     // Red "Error"

import { onlineDot, offlineDot, busyDot, awayDot } from '@frontmcp/ui';

onlineDot();   // Green dot
offlineDot();  // Gray dot
busyDot();     // Red dot
awayDot();     // Yellow dot

import { alert, toast, toastContainer } from '@frontmcp/ui';

alert('Operation completed successfully', {
  variant: 'success',
  title: 'Success',
  dismissible: true,
});

import { infoAlert, successAlert, warningAlert, dangerAlert } from '@frontmcp/ui';

successAlert('Saved!');
dangerAlert('Error occurred', { title: 'Error' });

import { input, select, textarea, checkbox, radioGroup, form } from '@frontmcp/ui';

input({
  type: 'email',
  name: 'email',
  label: 'Email Address',
  placeholder: '[email protected]',
  required: true,
});

interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
}

select({
  name: 'country',
  label: 'Country',
  options: [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ],
});

import { formRow, formSection, formActions, hiddenInput, csrfInput } from '@frontmcp/ui';

// Group fields horizontally
formRow([input1, input2]);

// Section with heading
formSection('Contact Info', fields);

// Action buttons (right-aligned)
formActions([cancelBtn, submitBtn]);

// Hidden fields
hiddenInput('id', '123');
csrfInput('token-value');

import { table, pagination } from '@frontmcp/ui';

table({
  columns: [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email' },
    {
      key: 'status',
      header: 'Status',
      render: (value) => badge(value, { variant: value === 'active' ? 'success' : 'default' }),
    },
  ],
  data: users,
  striped: true,
});

import { descriptionList, actionList, permissionList, featureList } from '@frontmcp/ui';

interface DescriptionItem {
  term: string;
  description: string;
}

descriptionList([
  { term: 'Name', description: 'John Doe' },
  { term: 'Email', description: '[email protected]' },
], { columns: 2 });

interface ActionItem {
  label: string;
  description?: string;
  icon?: string;
  href?: string;
  htmx?: HtmxOptions;
}

actionList([
  { label: 'Settings', icon: 'cog', href: '/settings' },
  { label: 'Logout', icon: 'sign-out', htmx: { post: '/logout' } },
]);

interface PermissionItem {
  name: string;
  granted: boolean;
  description?: string;
}

permissionList([
  { name: 'Read access', granted: true },
  { name: 'Write access', granted: false },
]);

interface FeatureItem {
  name: string;
  included: boolean;
}

featureList([
  { name: 'Unlimited projects', included: true },
  { name: 'Priority support', included: false },
]);

import { avatar, avatarGroup, avatarWithText } from '@frontmcp/ui';

avatar({
  src: '/user.jpg',
  alt: 'John Doe',
  size: 'lg',
  status: 'online',
});

avatar({
  initials: 'JD',
  size: 'md',
});

import { modal, modalTrigger, confirmModal, drawer } from '@frontmcp/ui';

modal('<p>Modal content</p>', {
  id: 'my-modal',
  title: 'Confirm Action',
  footer: button('Confirm', { variant: 'primary' }),
});

modalTrigger('my-modal', button('Open Modal'));

button('Delete', {
  htmx: {
    delete: '/api/items/123',
    target: '#item-123',
    swap: 'outerHTML',
    confirm: 'Are you sure?',
  },
});

import {
  ButtonOptionsSchema,
  CardOptionsSchema,
  BadgeOptionsSchema,
  AlertOptionsSchema,
  InputOptionsSchema,
  SelectOptionsSchema,
  TableOptionsSchema,
  AvatarOptionsSchema,
  ModalOptionsSchema,
} from '@frontmcp/ui';

// Validate options
const result = ButtonOptionsSchema.safeParse(userInput);
if (!result.success) {
  console.error(result.error);
}

<div class="validation-error" data-component="button" data-param="variant">
  Invalid property "variant" in button component
</div>