​
Overview

Creatr provides a rich gallery of pre-built components that you can easily integrate into your applications. These components are designed to help you build beautiful, functional interfaces with minimal effort. This guide will walk you through the process of finding, selecting, and implementing these components in your projects. To start using custom components:
  1. Open your project in Creatr
  2. Locate and click the Components icon (puzzle piece) in the sidebar
  3. This will open the Component Gallery interface
Component Gallery Access - Light Mode Component Gallery Access - Dark Mode

​
Browsing Components

The Component Gallery offers an intuitive browsing experience: Component Browser - Light Mode Component Browser - Dark Mode

​
Key Features

  1. Category Filters: Use the chips at the top to filter components by category:
    • All
    • 3D Elements
    • Accordion
    • AI Chat
    • Animation
    • And many more…
  2. Interactive Previews:
    • Hover over any component to see a live preview
    • Components with video demonstrations will play automatically on hover
    • See the component in action before deciding to import it
  3. Component Information:
    • View the creator’s credits
    • See download statistics
    • Check component ratings

​
Selecting and Importing Components

When you find a component you want to use: Component Import Dialog - Light Mode Component Import Dialog - Dark Mode
  1. Detailed View:
    • Click on the component to open its detailed view
    • See a larger demonstration
    • Review full component details and documentation
    • Check creator credits and attribution
  2. Import Process:
    • Click the “Import Component” button
    • Specify the integration details:
      • Target page or section
      • Global vs. local implementation
      • Component positioning
      • Any required customizations
  3. Implementation Options:
    • Add to specific pages
    • Implement globally across your application
    • Layer on top of existing components
    • Customize the component’s appearance and behavior

​
Best Practices

  1. Preview First: Always review the live preview before importing to ensure the component meets your needs
  2. Check Dependencies: Be aware of any additional dependencies the component might introduce
  3. Consider Performance: When using multiple components, consider their impact on page load times
  4. Customize Thoughtfully: While components are pre-built, you can still customize them to match your application’s design

​
Tips for Success

  • Start with essential components and add more as needed
  • Test components in development before deploying to production
  • Keep track of which components you’ve imported for easier maintenance
  • Review component documentation for advanced usage options
By leveraging Creatr’s pre-built components, you can significantly accelerate your development process while maintaining high-quality, professional results. The Component Gallery makes it easy to discover, preview, and implement the perfect components for your project needs.