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
A versatile button component with loading states and haptic feedback built-in.
- Variants:
Primary, Secondary, Ghost, Danger.
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.”
Using these standard components ensures that your app remains lightweight and easy to maintain when you export the code.
