# Web Components

Allegro ships a set of custom HTML elements you can drop into any page. Each component handles its own markup, behavior, and styles — just add the script tag and use the element wherever you need it.

| Component                                             | Element                  | Description                                            |
| ----------------------------------------------------- | ------------------------ | ------------------------------------------------------ |
| [Login Form](/developer/components/login-form.md)     | `<allegro-login-form>`   | Authenticates readers via magic link or OAuth          |
| [Email Form](/developer/components/email-form.md)     | `<allegro-email-form>`   | Collects email addresses with a confirmation state     |
| [Content Gate](/developer/components/content-gate.md) | `<allegro-content-gate>` | Blocks content behind a registration or paywall prompt |

## Previewing components[​](#previewing-components "Direct link to Previewing components")

The Allegro admin includes a **Component Previews** page under the **Developer** section. It renders each component in isolation so you can tweak attributes and see results without deploying to your site.

Navigate to `/developer/components` in your Allegro instance to open the preview tool.

![Component Previews page showing three component cards](/assets/images/components-preview-037618146cad3ad63f125b87b728fefa.png)