The component library is a collection of pre-built UI components you can drag and drop onto your page to build interfaces faster. These components are fully responsive and made up of containers, visual elements, and form inputs that you can customize individually once you've added them to your page. Each component works as an independent unit, but you can connect them to each other, or to other parts of your app, with workflows and data.
This article shows you how to use these components to build a landing page in seconds, and how to wire up the signup and login forms for full user authentication.
Accessing the component library
To access the component library, click the component icon in the top-right corner of the Design tab.
You will see the component library on the left side of the editor:
Build with components
The UI components in the component library let you build a fully responsive and customizable app in seconds.
1. Set the page layout to column
In the page's element property editor, set the page's layout property to column. This makes your components stack vertically as you add them, and lets the content resize as the screen width changes.
2. Add components to the page
Drag any number of components onto your page, one below the other. As you drop a component, a blue indicator on the canvas shows you where it'll land.
Components can be added within other groups, so make sure the blue indicator sits at the very bottom of the last container before you drop a new one.
Once you've added your components, you'll have a fully responsive landing page ready to customize.
Customize your components
With the skeleton of your landing page in place, you can customize each element to your liking. Select any text box or button to update its appearance, or select an image to replace it with one of your own.
As you add more pages to your app, update the placeholder links on your page to point to those pages. Do this by adding a Go to page workflow action that runs when the link is clicked.
To change the overall look and feel of your landing page, customize the font and color variables in the Style variables subtab of the Styles tab. Since every element's font and color is connected to a style variable, any change you make at the style variable level cascades through your app automatically. Adjust these variables so your landing page matches your brand.
Add workflows for user authentication
User authentication is the foundation of almost every web app. Using the header and signup and login components, you can set up a fully functional signup and login flow in a handful of clicks.
Once you've added the header and signup and login components to your page, connect the signup and login buttons in the header so they open the signup and login popup or page, depending on which component you selected. Most of the workflows are already set up to help you get started.
1. Connect the signup and login buttons
Open the Workflow tab for the page that contains the signup and login component. You'll see two workflows, both titled When an element is clicked. The first controls the signup form, and the second controls the login form.
In the first workflow event, change the element to Button signup (Header) to connect it to the workflow that opens the signup form. In the second workflow event, change the element to Button login (Header) to connect it to the workflow that opens the login form.
2. Set up the signup workflow
From the signup button in the signup form, start a workflow and add the Sign the user up action. Map the email input's value and the password input's value to the action's parameters, so it can register both fields.
3. Capture the user's name on signup
On the Data tab, select the User data type and add a new field of type text called Name. Back in the signup workflow, add a new action after Sign the user up called Make changes to Current User. Map the Name parameter to the Input Name's value, so the user you just signed up gets updated with the name they entered.
As you keep building your app, you can add more workflows here, like navigating the user to a specific page after signup, or any other logic your app needs.
4. Set up the login workflow
From the login button, start a workflow and add the Log the user in action. As with signup, map the email and password input values from the login form to the Email and Password parameters.
You can add more logic here depending on what should happen after a user logs in.
Your landing page is now connected to a full user authentication workflow.