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

# Style Your Microapp

> Create a beautiful and responsive UI for your microapp.

Let's create a simple, attractive interface for your microapp. The specific implementation will depend on your chosen framework, but the principles are the same across all frameworks.

## Styling Approaches

There are several approaches to styling your microapp:

### 1. Use CSS Frameworks

Many developers choose to use CSS frameworks like [Tailwind CSS](https://tailwindcss.com/), [Bootstrap](https://getbootstrap.com/), or [Material UI](https://material-ui.com/) to quickly create beautiful, responsive designs.

#### Example with Tailwind CSS

If you're using Tailwind CSS (which is included in many starter templates), you can create a simple, centered layout like this:

```jsx theme={null}
function HomePage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen text-center">
      <h1 className="text-6xl font-bold">My Microapp</h1>
      <p className="mt-4 text-xl">Welcome to my awesome microapp!</p>
    </div>
  );
}

export default HomePage;
```

### 2. Use CSS Modules or Styled Components

If you prefer CSS modules or styled components, those are excellent choices as well. Here's an example using CSS modules:

```jsx theme={null}
// HomePage.jsx
import styles from './HomePage.module.css';

function HomePage() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>My Microapp</h1>
      <p className={styles.description}>Welcome to my awesome microapp!</p>
    </div>
  );
}

export default HomePage;
```

```css theme={null}
/* HomePage.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

.title {
  font-size: 3.75rem;
  font-weight: bold;
}

.description {
  margin-top: 1rem;
  font-size: 1.25rem;
}
```

<Tip>
  Now that you have a basic understanding of styling options for your microapp, we encourage you to explore our comprehensive [UI documentation](/core-concepts/ui/overview) for more detailed guidance.
</Tip>