@saasflare/ui 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -115,7 +115,11 @@ light/dark surface variables, and motion tokens.
|
|
|
115
115
|
> content: ["./node_modules/@saasflare/ui/dist/**/*.{js,mjs}", /* ... */]
|
|
116
116
|
> ```
|
|
117
117
|
|
|
118
|
-
### 2.
|
|
118
|
+
### 2. Make `SaasflareShell` your document root *(mandatory)*
|
|
119
|
+
|
|
120
|
+
`SaasflareShell` **is the document** — it renders `<html>` and `<body>`
|
|
121
|
+
itself, plus the design-system context inside. Do **not** wrap it in your
|
|
122
|
+
own `<html>`/`<body>` tags; replace them entirely.
|
|
119
123
|
|
|
120
124
|
```tsx
|
|
121
125
|
// app/layout.tsx
|
|
@@ -125,24 +129,39 @@ import "./globals.css";
|
|
|
125
129
|
|
|
126
130
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
127
131
|
return (
|
|
128
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
132
|
+
<SaasflareShell
|
|
133
|
+
lang="en"
|
|
134
|
+
palette="saasflare"
|
|
135
|
+
theme="dark"
|
|
136
|
+
className={fontVariables}
|
|
137
|
+
>
|
|
138
|
+
{children}
|
|
139
|
+
</SaasflareShell>
|
|
133
140
|
);
|
|
134
141
|
}
|
|
135
142
|
```
|
|
136
143
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
`SaasflareShell` accepts `palette`, `theme`, `surface`, `radius`,
|
|
145
|
+
`animated`, `smoothScrolling`, `storageKey`, plus a `lang`, `className`
|
|
146
|
+
(applied to `<html>`), `bodyClassName`, and a `head` slot for `<head>`
|
|
147
|
+
content. The chosen `palette`/`surface`/`radius`/`animated` props are
|
|
148
|
+
baked into the SSR HTML as `data-*` attributes, so there is **zero FOUT**
|
|
149
|
+
and the pre-hydration script is disabled by default.
|
|
150
|
+
|
|
151
|
+
> **⚠️ Required, not optional.** `@saasflare/ui` uses `LazyMotion
|
|
152
|
+
> features={domAnimation} strict` to keep the motion bundle tight.
|
|
153
|
+
> Animated components use the `m.*` API (e.g. `m.button`) which throws at
|
|
154
|
+
> runtime if `LazyMotion` is missing. `SaasflareShell` (or
|
|
155
|
+
> `SaasflareProvider` directly, when you need to own `<html>`/`<body>`
|
|
156
|
+
> yourself) provides it. Without one, every `Button`, `Card`, `Dialog`,
|
|
157
|
+
> etc. will error on mount.
|
|
158
|
+
|
|
159
|
+
**When to use `SaasflareProvider` instead:** if you need a runtime palette
|
|
160
|
+
switcher (user picks a palette via a toggle, persisted in localStorage),
|
|
161
|
+
keep your own `<html>`/`<body>` and wrap children in `SaasflareProvider`.
|
|
162
|
+
The provider's pre-hydration script reads localStorage before paint.
|
|
163
|
+
`SaasflareShell` is for brand-locked apps where the palette is decided at
|
|
164
|
+
SSR time.
|
|
146
165
|
|
|
147
166
|
### 3. Use components
|
|
148
167
|
|
package/package.json
CHANGED