Components Reference

Loopar provides a rich library of components for building pages, forms, and applications. All components are drag-and-drop ready in the visual builder.

---

Component Categories

Category	Components
Layout	Section, Row, Col, Panel, Tab, Collapse
Typography	Title, Subtitle, Paragraph, Text Block, Markdown
Form Fields	Data, Text, Select, Date, Check, Link, Table, etc.
Media	Image, Banner Image, Icon, Carousel, Particles
Interactive	Button, Link, Card, Feature Card, Pricing Card
Data Display	Code Block, Table View, Badge, Progress
Navigation	Menu, Breadcrumb, Tabs

---

Common Properties

All components share these base properties:

Property	Type	Description
key	string	Unique identifier
label	string	Display name in builder
class	string	CSS/Tailwind classes
style	object	Inline styles
hidden	boolean	Hide component
animation	string	Animation effect
animation_delay	number	Delay in ms

---

Using Components

In Visual Builder

1. Drag component from panel
2. Drop into page/form
3. Configure properties in sidebar

In JSON

{
  "element": "component_name",
  "data": {
    "key": "unique_key",
    "label": "Display Name",
    "class": "custom-classes"
  },
  "elements": []
}

In JSX

import { Section, Row, Col, Title } from "@loopar/components";

<Section>
  <Row layout={[50, 50]}>
    <Col>
      <Title>Hello World</Title>
    </Col>
  </Row>
</Section>

Layout Components

Structural components for organizing page content.

---

Section

Full-width container. The primary building block for page sections.

{
  "element": "section",
  "data": {
    "key": "hero_section",
    "class": "py-20 bg-background",
    "background_color": "#ffffff",
    "background_image": "url(/images/bg.jpg)",
    "background_size": "cover",
    "background_position": "center",
    "min_height": "100vh"
  }
}

Property	Type	Default	Description
background_color	string	—	Background color
background_image	string/array	—	Background image URL
background_size	string	cover	cover, contain, auto
background_position	string	center	Position of background
min_height	string	—	Minimum height (e.g., 100vh)
padding	string	—	Padding (e.g., py-20)

---

Row

Horizontal container with column layout.

{
  "element": "row",
  "data": {
    "key": "content_row",
    "columns": [50, 50],
    "gap": "gap-6",
    "align_items": "center"
  }
}

Property	Type	Default	Description
columns	array	[100]	Column widths as percentages
gap	string	gap-4	Gap between columns
align_items	string	start	Vertical alignment
justify_content	string	start	Horizontal alignment

Column Layouts:

• [100] — Full width
• [50, 50] — Two equal columns
• [33, 33, 33] — Three equal columns
• [25, 25, 25, 25] — Four columns
• [30, 70] — Sidebar + content
• [70, 30] — Content + sidebar

---

Col

Column within a Row. Automatically created based on Row's columns property.

{
  "element": "col",
  "data": {
    "key": "left_col",
    "class": "p-4",
    "align": "center"
  }
}

Property	Type	Default	Description
class	string	—	Additional CSS classes
align	string	start	Content alignment

---

Panel

Card-like container with optional header, border, and shadow.

{
  "element": "panel",
  "data": {
    "key": "info_panel",
    "title": "Important Information",
    "variant": "default",
    "collapsible": false
  }
}

Property	Type	Default	Description
title	string	—	Panel header title
variant	string	default	default, outline, ghost, gradient
collapsible	boolean	false	Can collapse/expand
default_open	boolean	true	Initially expanded

---

Tab

Tabbed content container.

{
  "element": "tab",
  "data": {
    "key": "content_tabs",
    "tabs": [
      { "label": "Overview", "key": "overview" },
      { "label": "Details", "key": "details" },
      { "label": "Settings", "key": "settings" }
    ],
    "default_tab": "overview"
  }
}

Property	Type	Default	Description
tabs	array	—	Tab definitions
default_tab	string	first	Initially active tab
variant	string	default	Tab style variant

---

Collapse

Collapsible content section.

{
  "element": "collapse",
  "data": {
    "key": "faq_item",
    "title": "What is Loopar?",
    "default_open": false,
    "icon": "ChevronDown"
  }
}

Property	Type	Default	Description
title	string	—	Collapse header
default_open	boolean	false	Initially expanded
icon	string	ChevronDown	Toggle icon

---

Generic (Div)

Generic container for custom layouts.

{
  "element": "generic",
  "data": {
    "key": "custom_container",
    "class": "flex items-center justify-center p-8 bg-primary/10 rounded-xl",
    "inner_text": "Custom content here"
  }
}

Property	Type	Default	Description
class	string	—	CSS/Tailwind classes
inner_text	string	—	Text content
tag	string	div	HTML tag to use

Typography Components

Text and content display components.

---

Title

Heading text with configurable level.

{
  "element": "title",
  "data": {
    "key": "main_title",
    "text": "Welcome to Loopar",
    "size": "4xl",
    "tag": "h1",
    "class": "font-bold text-primary"
  }
}

Property	Type	Default	Description
text	string	—	Title content
size	string	2xl	sm, lg, xl, 2xl, 3xl, 4xl, 5xl
tag	string	h2	h1 - h6
gradient	boolean	false	Apply gradient effect

---

Subtitle

Secondary heading, typically paired with Title.

{
  "element": "subtitle",
  "data": {
    "key": "section_subtitle",
    "text": "Build faster, deploy smarter",
    "class": "text-muted-foreground"
  }
}

Property	Type	Default	Description
text	string	—	Subtitle content
size	string	lg	Text size

---

Paragraph

Body text content.

{
  "element": "paragraph",
  "data": {
    "key": "intro_text",
    "text": "Loopar is a meta-framework that revolutionizes how you build applications.",
    "class": "text-lg leading-relaxed"
  }
}

Property	Type	Default	Description
text	string	—	Paragraph content
class	string	—	Styling classes

---

Text Block

Combined title + subtitle + description block.

{
  "element": "text_block",
  "data": {
    "key": "features_intro",
    "subtitle": "Why Loopar?",
    "title": "Everything you need to build modern apps",
    "description": "From database to deployment, Loopar handles it all.",
    "align": "center"
  }
}

Property	Type	Default	Description
subtitle	string	—	Small text above title
title	string	—	Main heading
description	string	—	Body text below title
align	string	left	left, center, right

---

Markdown

Render markdown content with syntax highlighting.

{
  "element": "markdown",
  "data": {
    "key": "docs_content",
    "value": "# Getting Started\n\nWelcome to **Loopar**!\n\n```javascript\nconst app = new Loopar();\n```"
  }
}

Property	Type	Default	Description
value	string	—	Markdown content
class	string	—	Container classes

Supports:

• Headers, bold, italic, strikethrough
• Code blocks with syntax highlighting
• Tables, lists, blockquotes
• Links and images

---

Code Block

Syntax-highlighted code display.

{
  "element": "code_block",
  "data": {
    "key": "example_code",
    "code": "npx loopar-install my-project",
    "language": "bash",
    "show_line_numbers": true,
    "copyable": true
  }
}

Property	Type	Default	Description
code	string	—	Code content
language	string	javascript	Syntax highlighting
show_line_numbers	boolean	false	Show line numbers
copyable	boolean	true	Show copy button

Supported languages: javascript, typescript, python, bash, json, html, css, sql, jsx, markdown

Form Field Components

Input components for data collection. These store values in the database when used in Entities.

---

Data (Text Input)

Single-line text input.

{
  "element": "data",
  "data": {
    "name": "customer_name",
    "label": "Customer Name",
    "required": true,
    "placeholder": "Enter name...",
    "max_length": 100
  }
}

Property	Type	Default	Description
name	string	—	Field identifier
label	string	—	Display label
required	boolean	false	Must have value
placeholder	string	—	Placeholder text
max_length	number	255	Maximum characters
default	string	—	Default value
readonly	boolean	false	Cannot edit
hidden	boolean	false	Hide from UI

---

Text (Textarea)

Multi-line text input.

{
  "element": "text",
  "data": {
    "name": "description",
    "label": "Description",
    "rows": 5,
    "placeholder": "Enter description..."
  }
}

Property	Type	Default	Description
rows	number	3	Visible rows
max_length	number	—	Maximum characters

---

Select

Dropdown selection.

{
  "element": "select",
  "data": {
    "name": "status",
    "label": "Status",
    "options": "Draft\nPending\nApproved\nRejected",
    "default": "Draft"
  }
}

Property	Type	Default	Description
options	string	—	Options (newline separated)
default	string	—	Default selected value
allow_null	boolean	true	Allow empty selection

---

Check

Boolean checkbox.

{
  "element": "check",
  "data": {
    "name": "is_active",
    "label": "Is Active",
    "default": true
  }
}

Property	Type	Default	Description
default	boolean	false	Default checked state

---

Int / Float / Currency

Numeric inputs.

{
  "element": "currency",
  "data": {
    "name": "total_amount",
    "label": "Total Amount",
    "precision": 2,
    "min": 0
  }
}

Property	Type	Default	Description
precision	number	2	Decimal places (float/currency)
min	number	—	Minimum value
max	number	—	Maximum value
step	number	1	Increment step

---

Date / DateTime / Time

Date and time inputs.

{
  "element": "date",
  "data": {
    "name": "due_date",
    "label": "Due Date",
    "min_date": "today",
    "format": "YYYY-MM-DD"
  }
}

Property	Type	Default	Description
format	string	varies	Date/time format
min_date	string	—	Minimum allowed date
max_date	string	—	Maximum allowed date

---

Link

Reference to another entity (foreign key).

{
  "element": "link",
  "data": {
    "name": "customer",
    "label": "Customer",
    "options": "Customer",
    "filters": { "status": "Active" }
  }
}

Property	Type	Default	Description
options	string	—	Target entity name
filters	object	—	Filter linked records
link_field	string	name	Field to display

---

Table

Child table (one-to-many relationship).

{
  "element": "table",
  "data": {
    "name": "items",
    "label": "Items",
    "options": "Invoice Item",
    "columns": ["item_name", "quantity", "rate", "amount"]
  }
}

Property	Type	Default	Description
options	string	—	Child entity name
columns	array	—	Visible columns
min_rows	number	0	Minimum rows required
max_rows	number	—	Maximum rows allowed

---

Email / Phone / Password

Specialized text inputs with validation.

{
  "element": "email",
  "data": {
    "name": "email",
    "label": "Email Address",
    "required": true
  }
}

---

Image / File

File upload fields.

{
  "element": "image",
  "data": {
    "name": "profile_photo",
    "label": "Profile Photo",
    "accept": "image/*",
    "max_size": 5
  }
}

Property	Type	Default	Description
accept	string	*/*	Accepted file types
max_size	number	10	Max size in MB
multiple	boolean	false	Allow multiple files

---

Color

Color picker input.

{
  "element": "color",
  "data": {
    "name": "brand_color",
    "label": "Brand Color",
    "default": "#3b82f6"
  }
}

---

JSON

JSON editor field.

{
  "element": "json",
  "data": {
    "name": "metadata",
    "label": "Metadata",
    "default": {}
  }
}

Media Components

Visual and interactive media elements.

---

Image

Display image with various sizing options.

{
  "element": "image",
  "data": {
    "key": "hero_image",
    "background_image": "/images/hero.jpg",
    "alt": "Hero illustration",
    "aspect_ratio": "16:9",
    "background_size": "cover",
    "border_radius": "rounded-xl"
  }
}

Property	Type	Default	Description
background_image	string/array	—	Image URL
alt	string	—	Alt text
aspect_ratio	string	—	1:1, 4:3, 16:9, 21:9
background_size	string	cover	cover, contain, auto
background_position	string	center	Image position
border_radius	string	—	Border radius class

---

Banner Image

Full-width hero banner with overlay support.

{
  "element": "banner_image",
  "data": {
    "key": "hero_banner",
    "background_image": "/images/banner.jpg",
    "height": "500px",
    "overlay": true,
    "overlay_opacity": 0.5,
    "parallax": true
  }
}

Property	Type	Default	Description
background_image	string	—	Banner image URL
height	string	400px	Banner height
overlay	boolean	false	Show dark overlay
overlay_opacity	number	0.4	Overlay opacity (0-1)
parallax	boolean	false	Parallax scroll effect

---

Icon

Lucide icon display.

{
  "element": "icon",
  "data": {
    "key": "feature_icon",
    "icon": "Rocket",
    "size": "48",
    "color": "text-primary",
    "class": "mb-4"
  }
}

Property	Type	Default	Description
icon	string	—	Lucide icon name
size	string/number	24	Icon size in pixels
color	string	currentColor	Icon color class
stroke_width	number	2	Stroke width

Popular icons: Check, X, Plus, Minus, ChevronRight, ArrowRight, Star, Heart, User, Settings, Search, Menu, Rocket, Zap, Shield, Code, Database, Globe

---

Carousel

Image/content slider.

{
  "element": "carousel",
  "data": {
    "key": "testimonials_carousel",
    "autoplay": true,
    "interval": 5000,
    "show_arrows": true,
    "show_dots": true,
    "loop": true,
    "animation": "slide"
  }
}

Property	Type	Default	Description
autoplay	boolean	false	Auto-advance slides
interval	number	5000	Autoplay interval (ms)
show_arrows	boolean	true	Show prev/next arrows
show_dots	boolean	true	Show dot indicators
loop	boolean	true	Loop back to start
animation	string	slide	slide, fade
slides_per_view	number	1	Visible slides

---

Particles

Animated particle background.

{
  "element": "particles",
  "data": {
    "key": "hero_particles",
    "type": "dots",
    "color": "#3b82f6",
    "quantity": 50,
    "speed": 1,
    "opacity": 0.5,
    "connected": true
  }
}

Property	Type	Default	Description
type	string	dots	Particle type
color	string	#ffffff	Particle color
quantity	number	30	Number of particles
speed	number	1	Animation speed
opacity	number	0.7	Particle opacity
connected	boolean	false	Draw lines between
interactive	boolean	true	React to mouse

Card Components

Pre-styled card layouts for common use cases.

---

Feature Card

Highlight features with icon, title, and description.

{
  "element": "feature_card",
  "data": {
    "key": "feature_1",
    "icon": "Zap",
    "title": "Lightning Fast",
    "description": "Build and deploy in minutes, not hours.",
    "background_image": "https://illustrations.popsy.co/violet/rocket.svg",
    "link": "/features/speed",
    "variant": "default"
  }
}

Property	Type	Default	Description
icon	string	—	Lucide icon name
title	string	—	Card title
description	string	—	Card description
background_image	string/array	—	Background illustration
link	string	—	Card click destination
variant	string	default	default, outline, ghost

---

Pricing Card

Pricing tier display with feature list.

{
  "element": "pricing_card",
  "data": {
    "key": "pro_plan",
    "title": "Pro",
    "price": "$29",
    "period": "month",
    "description": "For growing teams",
    "features": [
      "Unlimited projects",
      "Priority support",
      "Custom domains",
      "Analytics dashboard"
    ],
    "cta_text": "Get Started",
    "cta_link": "/signup?plan=pro",
    "highlighted": true,
    "badge": "Popular"
  }
}

Property	Type	Default	Description
title	string	—	Plan name
price	string	—	Price display
period	string	month	Billing period
description	string	—	Plan description
features	array	—	List of features
cta_text	string	Get Started	Button text
cta_link	string	—	Button destination
highlighted	boolean	false	Highlight this card
badge	string	—	Badge text (e.g., "Popular")

---

Testimonial Card

Customer testimonial with quote and avatar.

{
  "element": "testimonial_card",
  "data": {
    "key": "testimonial_1",
    "quote": "Loopar transformed how we build applications. Development time reduced by 70%.",
    "author": "Jane Smith",
    "role": "CTO, TechCorp",
    "avatar": "/images/jane.jpg",
    "rating": 5
  }
}

Property	Type	Default	Description
quote	string	—	Testimonial text
author	string	—	Person's name
role	string	—	Title/company
avatar	string	—	Avatar image URL
rating	number	—	Star rating (1-5)

---

Stat Card

Display statistics with label and value.

{
  "element": "stat_card",
  "data": {
    "key": "users_stat",
    "value": "10,000+",
    "label": "Active Users",
    "icon": "Users",
    "trend": "+25%",
    "trend_direction": "up"
  }
}

Property	Type	Default	Description
value	string	—	Stat value
label	string	—	Stat label
icon	string	—	Optional icon
trend	string	—	Trend indicator
trend_direction	string	—	up, down, neutral

---

Team Card

Team member profile card.

{
  "element": "team_card",
  "data": {
    "key": "team_member_1",
    "name": "Alex Johnson",
    "role": "Lead Developer",
    "image": "/images/alex.jpg",
    "bio": "10+ years building enterprise software.",
    "social": {
      "twitter": "https://twitter.com/alex",
      "linkedin": "https://linkedin.com/in/alex",
      "github": "https://github.com/alex"
    }
  }
}

Property	Type	Default	Description
name	string	—	Member name
role	string	—	Job title
image	string	—	Photo URL
bio	string	—	Short bio
social	object	—	Social links

Interactive Components

Buttons, links, and user interaction elements.

---

Button

Clickable button with various styles.

{
  "element": "button",
  "data": {
    "key": "submit_btn",
    "label": "Submit",
    "variant": "default",
    "size": "default",
    "icon": "Send",
    "icon_position": "right",
    "loading": false,
    "disabled": false
  }
}

Property	Type	Default	Description
label	string	—	Button text
variant	string	default	default, destructive, outline, secondary, ghost, link
size	string	default	sm, default, lg, icon
icon	string	—	Lucide icon name
icon_position	string	left	left, right
loading	boolean	false	Show loading spinner
disabled	boolean	false	Disable button
full_width	boolean	false	Full width button

---

Link

Navigation link, can be styled as button.

{
  "element": "link",
  "data": {
    "key": "cta_link",
    "label": "Get Started",
    "to": "/signup",
    "variant": "default",
    "external": false,
    "icon": "ArrowRight"
  }
}

Property	Type	Default	Description
label	string	—	Link text
to	string	—	Destination URL
variant	string	link	Button variant for styling
external	boolean	false	Open in new tab
icon	string	—	Optional icon

---

Badge

Small status indicator or label.

{
  "element": "badge",
  "data": {
    "key": "status_badge",
    "text": "New",
    "variant": "default"
  }
}

Property	Type	Default	Description
text	string	—	Badge text
variant	string	default	default, secondary, destructive, outline

---

Progress

Progress bar indicator.

{
  "element": "progress",
  "data": {
    "key": "upload_progress",
    "value": 75,
    "max": 100,
    "show_label": true,
    "size": "default"
  }
}

Property	Type	Default	Description
value	number	0	Current value
max	number	100	Maximum value
show_label	boolean	false	Show percentage
size	string	default	sm, default, lg

---

Accordion

Expandable content sections (FAQ style).

{
  "element": "accordion",
  "data": {
    "key": "faq",
    "items": [
      {
        "title": "What is Loopar?",
        "content": "Loopar is a meta-framework for building full-stack applications."
      },
      {
        "title": "Is it free?",
        "content": "Yes, Loopar is open source and free to use."
      }
    ],
    "allow_multiple": false
  }
}

Property	Type	Default	Description
items	array	—	Accordion items
allow_multiple	boolean	false	Allow multiple open
default_open	number	—	Initially open index

---

Alert

Notification message box.

{
  "element": "alert",
  "data": {
    "key": "warning_alert",
    "title": "Warning",
    "description": "This action cannot be undone.",
    "variant": "warning",
    "icon": "AlertTriangle",
    "dismissible": true
  }
}

Property	Type	Default	Description
title	string	—	Alert title
description	string	—	Alert message
variant	string	default	default, info, success, warning, destructive
icon	string	—	Custom icon
dismissible	boolean	false	Can be closed

Animations

All components support entrance animations. Add these properties to any component.

---

Animation Properties

{
  "element": "any_component",
  "data": {
    "animation": "fade-up",
    "animation_delay": 100,
    "animation_duration": 500,
    "animation_once": true
  }
}

Property	Type	Default	Description
animation	string	—	Animation type
animation_delay	number	0	Delay in ms
animation_duration	number	400	Duration in ms
animation_once	boolean	true	Only animate once

---

Available Animations

Fade

Animation	Effect
fade	Simple fade in
fade-up	Fade in from below
fade-down	Fade in from above
fade-left	Fade in from right
fade-right	Fade in from left

Zoom

Animation	Effect
zoom-in	Zoom in from smaller
zoom-out	Zoom in from larger
zoom-in-up	Zoom + move up
zoom-in-down	Zoom + move down

Slide

Animation	Effect
slide-up	Slide from below
slide-down	Slide from above
slide-left	Slide from right
slide-right	Slide from left

Flip

Animation	Effect
flip-up	3D flip from bottom
flip-down	3D flip from top
flip-left	3D flip from right
flip-right	3D flip from left

---

Staggered Animations

Create staggered effects by incrementing delays:

[
  { "element": "feature_card", "data": { "animation": "fade-up", "animation_delay": 0 } },
  { "element": "feature_card", "data": { "animation": "fade-up", "animation_delay": 100 } },
  { "element": "feature_card", "data": { "animation": "fade-up", "animation_delay": 200 } }
]

This creates a cascading reveal effect.

---

Best Practices

Do	Don't
Use subtle animations	Overuse animations
Keep durations short (300-500ms)	Use very long durations
Stagger related elements	Animate everything at once
Use animation_once: true	Repeat animations on scroll
Match animation to content flow	Use random animation directions