Skip to content

Commit

Permalink
UI Library
Browse files Browse the repository at this point in the history
  • Loading branch information
phazonoverload committed Sep 17, 2024
1 parent da8506c commit 9e0394e
Showing 1 changed file with 57 additions and 0 deletions.
57 changes: 57 additions & 0 deletions content/10.extensions/4.app-extensions/7.ui-library.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

::

0 comments on commit 9e0394e

Please sign in to comment.