Custom Components

Create, customize, and reuse your own design components in QUORRA

Component Library

Hero Sections

12 custom components

Minimal Hero
Video Background
Split Layout

Navigation

8 custom components

Mega Menu
Sidebar Nav
Mobile Drawer

Forms

15 custom components

Contact Form
Newsletter Signup
Multi-step Form

Creating Custom Components

Component Builder

Design Your Component

  1. 1. Select elements from the canvas
  2. 2. Group them into a component
  3. 3. Define customizable properties
  4. 4. Set default values and variations
  5. 5. Save to your library

Quick Start

Component Properties

Make your components flexible by defining customizable properties.

Text Properties

TitleEditable text
DescriptionMultiline text
Button TextOptional text

Style Properties

Color ThemeColor picker
SizeSmall/Medium/Large
AlignmentLeft/Center/Right

Component Variations

Style Variations

Create multiple versions of the same component for different use cases.

Primary Button

Main action buttons with filled background

Secondary Button

Secondary actions with outline style

Text Button

Minimal buttons for subtle actions

Component Management

Organization

  • •Organize components into folders
  • •Tag components for easy searching
  • •Set favorites for quick access
  • •Version control for components

Sharing & Collaboration

  • •Share components with team members
  • •Publish to community library
  • •Import components from others
  • •Maintain design consistency

Advanced Features

Dynamic Content

Create components that adapt to different content types and lengths.

Auto-sizing

Components adjust height based on content

Conditional Elements

Show/hide elements based on content

Responsive Behavior

Define how components behave across different screen sizes.

Desktop Layout3 columns
Tablet Layout2 columns
Mobile Layout1 column

Code Export

Export your custom components as clean, reusable code.

HTML/CSS
Clean semantic markup
React
Component with props
Vue
Single file component

Component Best Practices

Design System Tips

  • •Consistent naming: Use clear, descriptive names for components and properties
  • •Flexible sizing: Design components to work with different content lengths
  • •Limited variations: Keep variations focused and purposeful
  • •Documentation: Add descriptions and usage examples
  • •Regular maintenance: Update components as design system evolves