> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tryblox.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Library

> Standard building blocks available in the Blox Editor

Blox comes with a pre-optimized library of mobile components. When you prompt the AI, it uses these building blocks to ensure high performance and accessibility.

## Layout & Containers

### GlassCard

A semi-transparent container with a blur effect, perfect for modern, high-end interfaces.

* **Props**: `blur`, `opacity`, `borderRadius`.

### ScreenContainer

The root container for every page. It handles safe area inserts for iPhone notches and status bars automatically.

## Typography

We use a hierarchy of styles based on the **Inter** typeface:

* **Hero**: Large, bold titles for landing screens.
* **Heading**: Section headers.
* **Body**: Standard reading text.
* **Caption**: Small, secondary information.

## Interactive Elements

### ActionButton

A versatile button component with loading states and haptic feedback built-in.

* **Variants**: `Primary`, `Secondary`, `Ghost`, `Danger`.

### FormInput

Text input fields with automatic keyboard management (e.g., numeric for phone numbers, email for addresses).

## Complex Components

### ImageHero

An optimized image container that handles lazy loading and skeleton states during fetch.

### TabNavigator

A standard bottom-bar navigation component that integrates with the Blox routing engine.

***

## Modifying Components

You can tell the AI to modify any of these components locally or globally:

> "Change the default `ActionButton` to have a gradient background from Salmon to Terracotta."

<Tip>
  Using these standard components ensures that your app remains lightweight and easy to maintain when you export the code.
</Tip>