40 lines
1018 B
Plaintext
40 lines
1018 B
Plaintext
|
---
|
||
|
|
title: Project setup
|
||
|
|
description: Import the global stylesheet and begin with explicit component subpaths.
|
||
|
|
order: 10
|
||
|
|
toc:
|
||
|
|
- id: import-styles
|
||
|
|
title: Import styles
|
||
|
|
- id: import-a-component
|
||
|
|
title: Import a component
|
||
|
|
- id: entry-points
|
||
|
|
title: Entry points
|
||
|
|
---
|
||
|
|
|
||
|
|
## Import styles {#import-styles}
|
||
|
|
|
||
|
|
Import the global stylesheet once at the application entry:
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import "@workspace/ui/globals.css"
|
||
|
|
```
|
||
|
|
|
||
|
|
It provides the shared Tailwind layers, design variables, font setup, and utilities expected by the components.
|
||
|
|
|
||
|
|
## Import a component {#import-a-component}
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { Button } from "@workspace/ui/components/button"
|
||
|
|
|
||
|
|
export function SaveButton() {
|
||
|
|
return <Button>Save</Button>
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Entry points {#entry-points}
|
||
|
|
|
||
|
|
- `@workspace/ui/components/*` exposes one component module.
|
||
|
|
- `@workspace/ui/hooks/*` exposes reusable interactions and media-query state.
|
||
|
|
- `@workspace/ui/lib/utils` exposes shared class-name composition.
|
||
|
|
- `@workspace/ui/locales/*` exposes language-specific catalogs.
|