From 9e0394e89e596616643d41215d94b7a1e762a72b Mon Sep 17 00:00:00 2001
From: Kevin Lewis <kvn@lws.io>
Date: Tue, 17 Sep 2024 16:24:19 +0200
Subject: [PATCH] UI Library

---
 .../4.app-extensions/7.ui-library.md          | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/content/10.extensions/4.app-extensions/7.ui-library.md b/content/10.extensions/4.app-extensions/7.ui-library.md
index c6236e89..3414ec9a 100644
--- a/content/10.extensions/4.app-extensions/7.ui-library.md
+++ b/content/10.extensions/4.app-extensions/7.ui-library.md
@@ -3,3 +3,60 @@ description:
 ---
 
 # UI Library
+
+Directus offers reusable UI components for building extensions, providing a consistent user experience across the Directus Data Studio. These components are used by Directus itself and can be utilized in any extension without explicit imports.
+
+Explore the available components in our [Directus Components Playground](https://components.directus.io/). Here, you can
+see all available components and experiment with variations before implementing them in your extensions.
+
+<!-- TODO: Reupload ![Exploring the Button Component and its variations on the Directus UI Components Playground](https://marketing.directus.app/assets/46d72f1a-5d9f-49f8-a09a-b2ffc5200812.gif) -->
+
+## Extension Usage
+
+Directus UI components are globally registered, making them accessible throughout your extension project without the
+need for explicit imports. Here’s an example:
+
+```html
+<VButton>My Button</VButton>
+```
+
+## Customizing Styles
+
+Each component exports CSS custom properties (variables) that can be targeted for style overrides.
+
+For example, to adjust the text color of a button on hover:
+
+```vue
+<template>
+	<!-- give the button a class -->
+	<VButton class="my-button">My Button</VButton>
+</template>
+
+<style>
+/* customize the style */
+.my-button {
+	--v-button-color-hover: black;
+}
+</style>
+```
+
+::callout{type="info" title="Explore Component CSS Variables"}
+
+Refer to the full list of component based CSS variables [in our codebase](https://github.com/directus/directus/tree/main/app/src/components).
+
+::
+
+## Creating a Custom UI Component
+
+The Directus UI components are designed with flexibility and customization in mind. However, you may need to create your
+own components using shared styling. Directus exposes several CSS variables for both light and dark themes.
+
+Examples of CSS variables include `--border-normal`, `--foreground-normal` `-purple`, `--module-background`, and
+`--overlay-color`.
+
+::callout{type="info" title="Explore Light and Dark Theme CSS Variables"}
+
+Refer to our [codebase](https://github.com/directus/directus/tree/main/app/src/styles/themes) for a full list of CSS
+variables.
+
+::
\ No newline at end of file