Maofeng
34 lines
1.2 KiB
Plaintext
34 lines
1.2 KiB
Plaintext
---
|
|
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, media, 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 and media workflows.
|
|
6. Finish with persistent appearance controls.
|