Creating Components

In UiPool, a component represents a reusable UI building block. Components can be:

• Buttons – Primary, secondary, ghost variants
• Form controls – Inputs, selects, checkboxes
• Layout elements – Cards, modals, drawers
• Data display – Tables, lists, badges

Components can be linked to patterns to show which building blocks make up each pattern.

To create a component in your UiPool workspace:

1. Navigate to Components
2. Click New Component
3. Fill in the component details:
   • Name – Human-readable component name
   • Slug – URL-friendly ID (used in annotations)
   • Category – Group by type (Buttons, Forms, etc.)
   • Kind – Component type (atom, molecule, organism)
4. Add optional references (Figma, Storybook, code repository)
5. Save the component

Track component usage with the uipool-component: annotation:

// uipool-component: button-primary
export function PrimaryButton({ children, onClick }) {
  return (
    <button 
      className="bg-blue-500 text-white px-4 py-2 rounded"
      onClick={onClick}
    >
      {children}
    </button>
  );
}

Components can be linked to patterns to show the relationship between building blocks and design patterns.

1. Open a pattern detail page
2. Click + Manage in the Components section
3. Select the components that make up this pattern
4. Save changes

This creates a mapping that helps teams understand which components are used in each pattern.