easy-web

Getting Started with easy-web

Set up your first easy-web project in 5 minutes.

1. Prerequisites

Before you begin, make sure you have the following installed on your machine:

  • Node.js 18 or higher
  • pnpm (recommended package manager)
  • An existing Astro project (or create a new one)

Verify your installation by running these commands in your terminal:

node --version
pnpm --version

If you need to start from scratch, run:

pnpm create astro@latest my-site

2. Install Packages

Install the core easy-web packages to your project. These provide design tokens, i18n helpers, and UI components.

pnpm add @easy-web/theme-core
pnpm add @easy-web/i18n
pnpm add @easy-web/content-blocks
  • theme-core: CSS variables, dark mode logic, and typography.
  • i18n: Bilingual routing and translation utilities.
  • content-blocks: Accessible, themed Astro components.

3. Add Design Tokens

Import the global design tokens in your main layout file and include the noFlashScript to prevent dark mode flickering during page load.


// Import tokens
import '@easy-web/theme-core/tokens.css';
import { noFlashScript } from '@easy-web/theme-core';

<html>
  <head>
    <script is:inline set:html=&#123;noFlashScript&#125;></script>
  </head>
</html>

4. Use Components

Start building your pages using the provided content blocks. These components automatically use your theme tokens.


// Use components
import Hero from '@easy-web/content-blocks/components/Hero';
import ThemeToggle from '@easy-web/content-blocks/components/ThemeToggle';

<Hero
  title="My Site"
  subtitle="Built with easy-web"
  ctaLabel="Learn More"
  ctaHref="/about"
/>
<ThemeToggle />

5. Next Steps

Now that you're set up, explore the rest of the ecosystem to build even faster.

Component Gallery

Browse all available UI blocks and their variations.

Theme Gallery

See how different design systems look on the same components.

API Documentation

Deep dive into the props and internals of each package.