For developers
Introduction
@pyxis/pyxis is the official UI Kit of Vade/Hornet built on top of the design token library @pyxis/design-tokens.
A design system is a comprehensive set of guidelines and reusable components that ensure consistency and efficiency in creating digital products.
Prerequisite
Pyxis is designed for projects using Vue 3.
However, we understand the importance of cross-framework compatibility, that's why we might expand the compatibility of Pyxis to other popular frameworks like Angular, React or Svelte in the future.
If your project doesn't support Vue 3 you can still access the design tokens of Pyxis via the library @pyxis/design-tokens and refer yourselft to its guide to install and use it properly.
Installation
To get started with the Pyxis, follow these steps:
- Configure our NPM private repository
- Install the package:
npm install @pyxis/pyxis
Usage
1. Import the styles to your main CSS file or in the main entry point of your App:
/* style.css */
@import '@pyxis/pyxis/dist/style.css';
or
// main.ts
import "@pyxis/pyxis/dist/style.css"
2. Import and use any component provided by Pyxis in your Vue files as follow:
<!-- Vue Template -->
<template>
<div>
<h2>Welcome to Pyxis!</h2>
<PyxisButton @click="handleClick" label="Click me!" />
</div>
</template>
<script>
import { PyxisButton } from '@pyxis/pyxis'
const handleClick = () => {
alert('Button is clicked')
}
</script>
For designers
Introduction : Pyxis UI Kit
Pyxis UI Kit is available on Figma. This library have been built to gather in on hand all the foundation that help use to build the second part, which is all our component. This UI Kit is divided in several page:
- The foundation: this page gather all colors, spacing rules, layers and so on. Those information are the base of all our component and brand style
- The components: Each component has its own page. On each page, you will find 3 sections : a benchmark, the documentation of the component, and the component itself.
How to use Pyxis UI Kit ?
In order to use Pyxis UI kit for you project, you need to answer to the following question first :
If yes, you can use our new variable and component. If no, you need to take in consideration that developpers have to migrate to @pyxis/pyxis in order to be able to use those new variable and components.
Now to apply and use pyxis on your project you need to :
- Step 1: Click on asset and then on the book icon "Team library"

Step 2: Open you Team Library, search the documente "Design System (new)", and click on "add to file"

Step 3: Right now, Pyxis UI kit is ready to use. To apply components or to use our variable, you can either find them insie "assets" or by opening the library dropdown (for colors / spacing etc)
