Components Panel

The Components panel provides access to all components in your document and linked libraries. Browse, search, and drag components to create instances.

Panel Sections

Local Components

Components defined in current document:

• Organized by page or folder
• Shows all variants
• Quick edit access

Library Components

Components from linked libraries:

• Grouped by library
• Shows update status
• Search across libraries

Using Components

Drag to Canvas

1. Find component in panel
2. Click and drag to canvas
3. Instance created at drop point

Double-Click Insert

1. Double-click component
2. Instance created at center of viewport

Component Variants

Components with multiple states:

• Hover over component to see variants
• Click variant chip to insert specific variant
• Use Properties panel to switch variants

Searching

• Use search bar at top
• Searches names and descriptions
• Filters across all sources
• Recent searches saved

Component Organization

Folders

• Use "/" in names for hierarchy
• Example: "Button/Primary", "Button/Secondary"
• Folders collapse/expand

Tags

• Add tags in component settings
• Filter by tags in panel

Creating Components

From Selection

1. Select 2 or more elements to make component
2. Right-click > Create Component
3. Or use Cmd/Ctrl + Alt + K (with 2+ elements selected)
4. Name the component

With Variants

1. Create multiple component versions
2. Select all versions
3. Right-click > Combine as Variants
4. Configure variant properties

Component Properties

Define customizable properties:

• Boolean - Show/hide toggle
• Instance Swap - Replace nested component
• Text - Editable text content
• Variant - Switch between variants

Instance Swapping

Replace component instances:

1. Select an instance
2. In panel, find replacement component
3. Right-click > Swap Instance
4. Or drag new component onto instance

Editing Components

Edit Main Component

1. Double-click instance to enter
2. Or right-click > Go to Main Component
3. Make changes
4. All instances update

Detach Instance

• Right-click instance > Detach
• Instance becomes regular elements
• No longer linked to main

Best Practices

• Use consistent naming conventions
• Organize with folders for large systems
• Add descriptions to components
• Use variants for related states
• Expose commonly-changed properties
• Keep components in a dedicated page