> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-screen/spacer-element.md).

# Spacer Element

The Spacer Element adds empty vertical space between components on your app screen. It’s perfect for improving readability, separating sections, or aligning elements for better visual flow.

***

## <mark style="color:green;">Settings Tab – Adjust the Space</mark>

### Height

* Use the slider to increase or decrease space (in pixels)
* You can also enter an exact value (e.g., 20px, 60px, etc.)

### 👁️ Visibility

Like other Twinr elements, you can choose where and when the spacer appears:

* Platform: iOS, Android, PWA, or All
* Device: Mobile, Tablet, or All
* User: Guest, Logged-in, or All

***

### <mark style="color:green;">✅ Use Case Examples</mark>

| Scenario                            | How Spacer Helps                                   |
| ----------------------------------- | -------------------------------------------------- |
| Add breathing room between cards    | Insert a 20–40px spacer                            |
| Separate banner from product list   | Add a spacer to break visual flow                  |
| Custom layouts with multiple blocks | Use spacers to create clear groupings              |
| Mobile optimization                 | Show different spacers for mobile/tablet if needed |