simple-react-app-kit/packages/blocks/docs/en-US/overview.mdx

---
title: Overview
description: Understand how the Blocks package turns UI primitives into complete application features.
order: 1
toc:
  - id: what-you-will-build
    title: What you will build
  - id: design-boundary
    title: Design boundary
  - id: tutorial-map
    title: Tutorial map
---

## What you will build {#what-you-will-build}

This tutorial builds an application shell step by step. You will begin with the shared layout, connect navigation, then add notifications, chat, and appearance preferences.

By the end, the application owns its data and business rules while `@workspace/blocks` owns the reusable presentation and interaction patterns.

## Design boundary {#design-boundary}

Blocks sit above `@workspace/ui`. They combine low-level components into features, but they do not choose your API, database, router configuration, or storage provider.

> Keep data access in the host application. Pass it into a block through props, query functions, providers, or adapters.

## Tutorial map {#tutorial-map}

1. Install the package and global styles.
2. Create the application shell.
3. Define navigation and route state.
4. Connect notifications.
5. Add chat workflows.
6. Finish with persistent appearance controls.