> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design/the-component-library.md).
# The component library
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[^1] and made up of containers[^2], [visual elements](#user-content-fn-3)[^3], and [form inputs](#user-content-fn-4)[^4] 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[^5] 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.
{% stepper %}
{% step %}
#### 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.
{% endstep %}
{% step %}
#### 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.
{% endstep %}
{% endstepper %}
{% hint style="info" %}
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.
{% endhint %}
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.
{% stepper %}
{% step %}
#### 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.
{% endstep %}
{% step %}
#### 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.
{% endstep %}
{% step %}
#### 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.
{% endstep %}
{% step %}
#### 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.
{% endstep %}
{% endstepper %}
Your landing page is now connected to a full user authentication workflow.
[^1]: *Responsive design* is a method that gives your users a great experience no matter what device they use to access your app.
The goal of responsive design is to create a single page that automatically adjusts its layout and content to fit the screen size and resolution of the device being used to access it.
**Article series:** [Responsive design](/help-guides/design/responsive-design.md)
[^2]: *Containers* are used to contain elements and control how they behave on the page. Bubble has six container types that behave in different ways.
**Article series:** [Web containers](/help-guides/design/elements/web-app/containers.md)\
**Article series:** [Mobile containers](/help-guides/design/elements/ios-and-android-app/containers.md)
[^3]: *Visual elements* are elements you can place on a page that can't contain other elements (like groups) and can't accept input (like input elements), such as text, images, and icons.
**Article:** [Visual elements (web)](/help-guides/design/elements/web-app/visual-elements.md)\
**Article:** [Visual elements (mobile)](/core-resources/elements/native-mobile-elements/visual-elements.md)
[^4]: Input forms are elements you use to collect information from your users, such as text inputs, date pickers, and file uploaders. They can be as simple as a checkbox or combined into complex forms.
Article series: Input forms
[^5]: *Workflows* are the engine of your app. They're how you instruct Bubble to respond to what a user does, like clicking a button, with a set of actions that can do anything from hiding, showing, or animating elements on the page to making changes in the database or calling an external API.
A *workflow* is the combination of an *event* that triggers one or more *actions*.
Article series: Workflows