Please visit us from a PC
Currently, we do not support mobile devices
Please rotate your device
If you are using a PC, please increase the browser's window size and reload the page
Loading
This takes just a few seconds
format_paint
UI
code
Code
settings
Settings
computer Desktop view
tablet_mac Tablet view
phone_iphone Phone view
border_clear Show layout borders
crop_free Full view
view_sidebar Show default sidebar
play_arrow Preview
Publish
add_ad Create new screen
Views
Files
drive_folder_upload
Image Preview
auto_fix
Remove Background
workspaces
Here you will be able to change the values of the variables for this specific instance of the component.
Here you will be able to change the values of the parameters for this specific instance of the component.
alt_route
Decompose Component
drive_file_rename_outline Layer
Style
Events
CSS
deployed_code Create Component Create a component based on this layer
HTML Tag
section
section
div
nav
header
footer
article
aside
button
Form
AntD Form
Variant
Default
Add new...
Default
Pepe
Classes
Select
Create from state...
Position
Sta Position Static Abs Position Absolute Rel Position Relative Fix Position Fixed Sti Position Sticky
z-index:
vh
px
vw
vh
attach_file
Top
vh
px
vw
vh
attach_file
Bottom
vw
px
vw
vh
attach_file
Left
vw
px
vw
vh
attach_file
Right
Width
Wrap Fill Fixed
attach_file
Min Width:
vw
px
vw
vh
%
attach_file
Max Width:
vw
px
vw
vh
%
attach_file
Height
Wrap Fill Fixed
attach_file
Min Height:
vw
px
vw
vh
%
attach_file
Max Height:
vw
px
vw
vh
%
attach_file
Visibility
Visible
attach_file
Cursor
Pointer
Alignment
align_vertical_top Main axis start
align_vertical_center Main axis center
align_vertical_bottom Main axis end
vertical_distribute Main axis distribute
align_horizontal_left Cross axis start
align_horizontal_center Cross axis center
align_horizontal_right Cross axis end
horizontal_distribute Cross axis distribute
Orientation (flex-direction)
Vertical Horizontal
attach_file
Scrollable (overflow)
Flex Wrap
Split code in another function
Split code in another file
Background
Transparent
Transparent
Fill
Image
Borders
Dashed Borders
Border Color:
attach_file
Width:
attach_file
Radius
select_all Select each border radius
attach_file
Shadow
Blur
attach_file
Shadow Color:
attach_file
px
px
vw
vh
attach_file
Offset X
px
px
vw
vh
attach_file
Offset Y
Padding
vh
px
vw
vh
attach_file
Top
vh
px
vw
vh
attach_file
Bottom
vw
px
vw
vh
attach_file
Left
vw
px
vw
vh
attach_file
Right
Margin
vh
px
vw
vh
attach_file
Top
vh
px
vw
vh
attach_file
Bottom
vw
px
vw
vh
attach_file
Left
vw
px
vw
vh
attach_file
Right
workspaces
Here you will be able to change the values of the variables for this specific instance of the component.
drive_file_rename_outline Text
Style
Events
CSS
HTML Tag
p
p
h1
h2
h3
h4
h5
h6
a
ol
ul
Variant
Default
Add new...
Default
Pepe
Classes
Select
Create from state...
Text
attach_file
Width
Wrap Fill Fixed
attach_file
Min Width:
vw
px
vw
vh
%
attach_file
Max Width:
vw
px
vw
vh
%
attach_file
Height
Wrap Fill Fixed
attach_file
Min Height:
vw
px
vw
vh
%
attach_file
Max Height:
vw
px
vw
vh
%
attach_file
Visibility
Visible
attach_file
Cursor
Pointer
Font
Select Font
attach_file
attach_file
attach_file
N B I
format_align_left format_align_center format_align_right
Font Weight:
attach_file
Font Leading:
attach_file
Font Spacing:
attach_file
Margin
vh
px
vw
vh
attach_file
Top
vh
px
vw
vh
attach_file
Bottom
vw
px
vw
vh
attach_file
Left
vw
px
vw
vh
attach_file
Right
workspaces
Here you will be able to change the values of the variables for this specific instance of the component.
drive_file_rename_outline Icon
Style
Events
CSS
Variant
Default
Add new...
Default
Pepe
Classes
Select
Create from state...
Icon
favorite
attach_file
Icon Size:
vh
px
vw
vh
%
attach_file
Icon Color:
attach_file
Visibility
Visible
attach_file
Cursor
Pointer
Margin
vh
px
vw
vh
attach_file
Top
vh
px
vw
vh
attach_file
Bottom
vw
px
vw
vh
attach_file
Left
vw
px
vw
vh
attach_file
Right
workspaces
Here you will be able to change the values of the variables for this specific instance of the component.
drive_file_rename_outline ImageView
Style
Events
CSS
Variant
Default
Add new...
Default
Pepe
Classes
Select
Create from state...
Image Source
Select Image
attach_file
Width
Fill Fixed
attach_file
Size
px
px
vw
vh
%
Min Width:
vw
px
vw
vh
%
attach_file
Max Width:
vw
px
vw
vh
%
attach_file
Height
Fill Fixed
attach_file
Size
px
px
vw
vh
%
Min Height:
vw
px
vw
vh
%
attach_file
Max Height:
vw
px
vw
vh
%
attach_file
Visibility
Visible
attach_file
Cursor
Pointer
Margin
vh
px
vw
vh
attach_file
Top
vh
px
vw
vh
attach_file
Bottom
vw
px
vw
vh
attach_file
Left
vw
px
vw
vh
attach_file
Right
workspaces
Here you will be able to change the values of the variables for this specific instance of the component.
drive_file_rename_outline Screen
Style
SEO
HTML Tag
main
main
URL:Route for this page (the default value is the screen's name)
Alignment
align_vertical_top Main axis start
align_vertical_center Main axis center
align_vertical_bottom Main axis end
vertical_distribute Main axis distribute
align_horizontal_left Cross axis start
align_horizontal_center Cross axis center
align_horizontal_right Cross axis end
horizontal_distribute Cross axis distribute
Orientation (flex-direction)
Vertical Horizontal
attach_file
Scrollable (overflow)
Background Color:
attach_file
Padding
vh
px
vw
vh
attach_file
Top
vh
px
vw
vh
attach_file
Bottom
vw
px
vw
vh
attach_file
Left
vw
px
vw
vh
attach_file
Right
Themes
Components
cloud_upload Import code
store Browse components
search
folder Only show components used in this project
Material Design Icons
search
Material Colors
Gradients
Shade:
500
Welcome to Agua
Made with ❤️ for developers 🧑‍💻
Ready to build the future?
folder_open
Open folder...
Select an empty folder or open a react project
Recent
Some tutorials first?
school
Read the docs
Watch our courses
help
Contact us for support
video_call
Book a call with our founders
how_to_vote
Suggest features