Installation Guide

Get EthioWDS up and running in your React project with these simple steps.

1

Install Package

Install EthioWDS using npm or yarn:

npm install ethiowds
yarn add ethiowds
2

Import CSS

Import the main CSS file in your application:

// In your main App.js or index.js
import 'ethiowds/dist/styles.css';
3

Start Using Components

Import and use components in your React components:

import { Button, Input } from 'ethiowds';

function MyComponent() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input placeholder="Enter text..." />
    </div>
  );
}

Next.js Setup

For Next.js projects, you might need to configure CSS imports:

// next.config.js
const nextConfig = {
  // ... your existing config
  transpilePackages: ['ethiowds'],
}

module.exports = nextConfig

Manual Setup

If you prefer to include the CSS manually, add this to your HTML:

<link rel="stylesheet" href="path/to/ethiowds/styles.css" />

What's Next?

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