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:
- Fully interactive components built with Vue 3. These components require Vue 3 and JavaScript.
- 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, check 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 ​
- 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