Codex

Appearance

Components ​

Components are the interactive building blocks of our design system. They are used to create consistent and powerful user interfaces.

The Codex library contains two types of components:

  1. Fully interactive components built with Vue 3. These components require Vue 3 and JavaScript.
  2. CSS-only components that consist either of styles with suggested markup (e.g. the CSS-only Button) or a Less mixin (e.g. Link). Most of the Vue components have a corresponding CSS-only version. These components can be used without JavaScript.

Each component in Codex has a demo page where you can interact with working examples, see code samples, and read detailed usage information about the Vue and CSS-only implementations.

Using components ​

Figma ​

Enable the Codex Figma library to reuse all the Codex components in your Figma files.

NPM package ​

See the installation and using components documentation for information about how to use Codex components in your application.

In MediaWiki ​

Component roadmap ​

If you want to know more about the components we plan to add to Codex in the future, read about Codex planned components on mediawiki.org.

Resources ​