Installation

Get started using the Design System by installing, compiling, and customizing our code.

1

Download or install the design system

Obtain the EthioWDS code using your preferred method—package manager, download, or CDN—so it is available to your project.

Install command (Linux and Windows)

From your project folder, open a terminal (on Windows: Command Prompt, PowerShell, or Windows Subsystem for Linux) and run:

npm install @abiyub/ethiowds

On Linux or macOS, use the same command in your terminal. To use Yarn instead, run:

yarn add @abiyub/ethiowds
2

Add styles and assets to your project

Include the design system styles in your project so that components and tokens are available. Add the main stylesheet in your app’s main layout or entry file so it loads on every page.

Import the stylesheet

In your main layout or root file, add:

import '@abiyub/ethiowds/dist/css/ethio-wds.css';

If your project does not use a bundler, add a link tag in the <head> of your HTML:

<link rel="stylesheet" href="node_modules/@abiyub/ethiowds/dist/css/ethio-wds.css" />

On Linux or Windows, the path is the same; the stylesheet is inside the node_modules folder after you run the install command from step 1.

3

Use components and customize

Use the design system components and patterns in your pages. Override tokens or customize themes as needed for your brand or product.

Use components

Use the design system class names on your elements. For example, a primary button:

<button class="eth-button eth-button--primary">Click me</button>

Browse the Components section for all available components and class names.

Customize (optional)

To match your brand, override design tokens such as colors and typography. Add your overrides in your own stylesheet, or use the variables provided by the design system. See the Theming guide for details.

Configuration

Depending on how you integrate the design system, you may need to adjust your build or project configuration so that styles compile correctly and assets resolve. Refer to your tooling documentation for including third-party design system files.

Manual inclusion

If you prefer to include the design system files manually, add the stylesheet and any scripts to your project and link to them from your templates or entry point.

What's next?

Now that you have EthioWDS set up, check out the usage guide to learn how to make the most of the components and features.