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, Bootstrap, or Material UI 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:

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:

// 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;

/* 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;
}

Now that you have a basic understanding of styling options for your microapp, we encourage you to explore our comprehensive UI documentation for more detailed guidance.