Linking Components

When you scan your codebase with UiPool, you discover both patterns (high-level UI workflows) and components (reusable building blocks). Linking components to patterns creates a complete picture of how your design system is implemented.

• →
  Understand composition — See which components make up each pattern
• →
  Track coverage — Know which patterns have proper component implementations
• →
  Impact analysis — When updating a component, see which patterns are affected
• →
  Documentation — Auto-generate pattern documentation showing required components

To link components to a pattern:

1. 1Navigate to Patterns and select a pattern
2. 2In the Components section, click + Manage
3. 3Search and select the components that belong to this pattern
4. 4Click Save changes to persist the relationships

You can also annotate your code so components are automatically associated during scans:

// uipool-pattern: login-flow
export function LoginForm() {
  return (
    <form className="login-form">
      {/* uipool-component: text-input */}
      <TextInput label="Email" type="email" />
      
      {/* uipool-component: text-input */}
      <TextInput label="Password" type="password" />
      
      {/* uipool-component: button-primary */}
      <Button variant="primary">Sign In</Button>
    </form>
  );
}

When both the pattern and component appear in the same file, UiPool can suggest linking them automatically.

Once linked, components appear in the pattern detail page:

• Component name and category badge
• Photo preview on hover (if component has photos)
• Click to navigate to the component detail page

To unlink a component from a pattern:

1. 1Open the pattern and click + Manage in the Components section
2. 2Uncheck the component you want to remove
3. 3Click Save changes

• •Link atomic components — Focus on reusable building blocks, not one-off implementations
• •Use consistent naming — Ensure component IDs in code match your design system terminology
• •Review after scans — Check for new components that should be linked after each scan
• •Document slots — Use the notes field to describe how the component fits in the pattern