unframer 2.9.1 → 2.9.2
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 +29 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -10,6 +10,7 @@ Download framer components as simple files
|
|
|
10
10
|
|
|
11
11
|
- Works with any React framework (Next.js, Remix, Vite, etc)
|
|
12
12
|
- Includes all your components dependencies
|
|
13
|
+
- Works with Framer locales, fetch, Framer Forms, color styles, dark mode (via `dark` class), etc
|
|
13
14
|
- Has Typescript support, inferred from your component variables (like `variant`)
|
|
14
15
|
|
|
15
16
|
## Usage
|
|
@@ -134,6 +135,30 @@ export default function App() {
|
|
|
134
135
|
}
|
|
135
136
|
```
|
|
136
137
|
|
|
138
|
+
## Dark Mode
|
|
139
|
+
|
|
140
|
+
Unframer supports dark mode through CSS classes:
|
|
141
|
+
|
|
142
|
+
1. Add the `dark` class to any parent element of your component
|
|
143
|
+
2. This will automatically switch all color style variables to use the dark mode values defined in Framer
|
|
144
|
+
|
|
145
|
+
That's all you need to enable dark mode for your Framer components!
|
|
146
|
+
|
|
147
|
+
> This is also how Tailwind's dark mode works - when you add the `dark` class to a parent element, any Tailwind dark mode classes (like `dark:bg-gray-900`) within that element will be activated. So you can seamlessly combine Framer and Tailwind dark mode by using the same `dark` class:
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
import './framer/styles.css'
|
|
151
|
+
import Logos from './framer/logos'
|
|
152
|
+
|
|
153
|
+
export default function App() {
|
|
154
|
+
return (
|
|
155
|
+
<div className='dark'>
|
|
156
|
+
<Logos />
|
|
157
|
+
</div>
|
|
158
|
+
)
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
137
162
|
## Troubleshooting
|
|
138
163
|
|
|
139
164
|
If you find any errors rendering your components:
|
|
@@ -172,3 +197,7 @@ For example in May 2024 Framer upgraded to React 19 and unframer broke, the reas
|
|
|
172
197
|
## Example
|
|
173
198
|
|
|
174
199
|
Look at the [nextjs-app source code folder](./nextjs-app) for an example and [the deployed website here](https://unframer-nextjs-app.vercel.app/)
|
|
200
|
+
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unframer",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.2",
|
|
4
4
|
"description": "Import Framer components directly in your React app, type safe and customizable",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"repository": "https://github.com/remorses/unframer",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"async-sema": "^3.1.1",
|
|
46
46
|
"cac": "^6.7.14",
|
|
47
47
|
"dprint-node": "^1.0.8",
|
|
48
|
-
"esbuild": "^0.24.
|
|
48
|
+
"esbuild": "^0.24.2",
|
|
49
49
|
"esbuild-plugins-node-modules-polyfill": "^1.6.8",
|
|
50
50
|
"eventemitter3": "^3.1.2",
|
|
51
51
|
"find-up": "^5.0.0",
|