From eeffe5e636af6fcb1baf0d55108e3b0493e851ef Mon Sep 17 00:00:00 2001
From: typicode <typicode@gmail.com>
Date: Tue, 5 Nov 2024 02:54:43 +0100
Subject: [PATCH] Update README.md

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index e044b90..e2ea3bd 100644
--- a/README.md
+++ b/README.md
@@ -282,6 +282,24 @@ button {
 
 See also your CSS framework/tooling documentation for ways to define them in JS if you prefer.
 
+### How to Use MistCSS with an External UI?
+
+Assuming you have your UI components in a separate package `my-ui` and you're using Next.js, follow these steps:
+
+`app/layout.tsx`
+
+```tsx
+import 'my-ui/mist.css'
+```
+
+`app/mist.d.ts`
+
+```
+import 'my-ui/mist.d.ts
+```
+
+This setup ensures that your Next.js application correctly imports styles and type definitions from your external UI package. It may vary based on tools you're using, but the same principles should apply.
+
 ### Origin of the project name?
 
 Mist is inspired by atomized water 💧 often seen near waterfalls. A nod to the _Cascading_ in CSS 🌊.