UI Elements

Welcome to the UI Elements documentation! This section provides detailed information about all the UI elements available in WeWeb. Each element is designed to help you build beautiful and functional web applications without writing code.

Getting Started

To use any of these elements in your WeWeb application:

1. Open the Add Element in your project
2. Find the element you want to use
3. Drag and drop it onto your canvas
4. Customize its properties and styling

Each element comes with its own set of properties and customization options. Click on any element below to learn more about its specific features and how to use it effectively in your projects.

Navigation Elements

• Top Navigation Bar - Create responsive top navigation menus
• Bottom Navigation - Build mobile-friendly bottom navigation
• Side Menu - Add collapsible side menus
• Breadcrumb New - Show hierarchical navigation paths

Layout Elements

• Container - Basic container for organizing content
• Flexbox Container - Create flexible layouts
• Columns - Build multi-column layouts
• Sections - Organize page sections
• Div - Generic container element

Form Elements

• Form Container - Group form elements together
• Input - Text input fields
• OTP Input New - One-time code input
• Button - Clickable buttons
• Checkbox - Toggle options
• Radio Group - Select one option from many
• Select & Multi-select - Dropdown selection
• File Upload New - Handle file uploads
• Range Input - Slider controls
• Color Picker - Color selection
• Date Pickers - Date selection
• QR Code Reader - Scan QR codes

Display Elements

• Text - Display text content
• Heading - Create headings
• Image - Show images
• Icon - Display icons
• Video - Embed videos
• Code - Display code snippets
• Rich Text - Formatted text content
• Table - Display tabular data
• List - Create lists
• Timeline New - Show chronological content

Interactive Elements

• Dialog (Modal, Alert, Sheet) - Create popups and modals
• Accordion - Collapsible content sections
• AI Chat New - Assistant-style AI chat with streaming and attachments
• Dropdown - Dropdown menus
• Autocomplete - Searchable dropdowns
• Search - Search functionality
• Chat New - Real-time chat interface
• Content Slider - Slide through content
• Image Slider - Image carousels
• Infinite Slider - Continuous scrolling
• Reorder List - Drag-and-drop reordering
• Kanban - Kanban board interface
• Progress Bar - Show progress
• Donut Progress Bar - Circular progress indicators
• Skeleton Loader New - Loading placeholders
• Loader - Loading indicators

Data Display Elements

• Data Grid New - Advanced data management
• Calendar New - Advanced calendar features

Utility Elements

• Iframe - Embed external content
• Language - Language selection
• Masked - Input masking
• Recaptcha - Add CAPTCHA verification
• Paginator - Pagination controls

Deprecated Elements Deprecated

• Alert - Notification alerts
• Calendar - Display calendar views
• Drag and Drop Files - Interactive file uploads
• Data Grid - Display and manage data
• Modal - Create popups and modals