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 ​

• Learn how to use Vue Codex components in MediaWiki.
• Learn how to use CSS-only Codex components 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 ​

• Learn how to contribute or request a component
• Read about designing new Codex components
• Read about updating existing Codex components