What Directus components can I use in my Extension

Are you building an extension and wanting to use Directus components? There is a great component playground where you can try out different components and copy the code into your own extension.

The Directus component playground is available at https://components.directus.io. Use the left navigation to choose a component, then the right side panel to modify the properties. The code is generated underneath the properties.

Directus Components

Step 1: Select a Component

Open the link above and choose a component from the left-side navigation. Click through each one to get an idea of what they look like and how you can use them.

There are some tiny icons above the view window where you can set the view window size (mobile, tablet & desktop), change the direction (Ltr or Rtl) and open the current variant in a new tab.

Step 2: Customise the Component

On the right-side panel are the properties for the selected component. Change these values and see how the component reacts. Ticking the boxes is the same as setting the property to true and unticking them will set them to false. For text fields, start typing and you will see the component update in realtime.

Unfortunately, the documentation is missing so it's difficult to know what to set text values to so you just need to guess. For example, the button component has the text field property labelled kind which default to normal. I tried changing this to large and the button go bigger. Then tried change it to small and it went smaller.

It's not all guess work, you can visit the Directus Github repo and search for the component. The source code will indicate what values are expected for each property.

Step 3: Copy the Code

Under the properties window is generated code based on the changes made in step 2. Copy this into your project and update as needed.

<VButton
  @click="logEvent('click', $event)"
  kind="large"
>
  My Button
</VButton>

Conclusion

With the resource, you can create extensions that utilise the power of the Directus component library and fit within the look and feel of Directus.