Skip to content
On this page

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

View the Codex Components Figma library.

NPM package

Learn how to use Codex components via the @wikimedia/codex package.

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