# Design-system

# Design system

This design system contains reusable UI component and patterns built using the Yew Framework

# Create component

To add a new component, simply create a new file for the component. Here is an example:

Create a new file in the components folder with the name of your component, for example, banner.rs. Add the following code to this file:

//design-system/components/banner.rs

use yew::prelude::*;

#[function_component]
pub fn Banner() -> Html {
    html! {
        // Implement your HTML code here
    }
}

# How to Use Components from the Design System

This section explain how to start using the components from our pre-configured design system.

# Example: Using Components from the Design System

use yew::prelude::*;
use design_system::components::banner::Banner;

#[function_component(HomeView)]
pub fn home_view() -> Html {
  html! {
        <div>
            <Banner />
        </div>
    }
}

The HomeView component uses various components like Banner, all imported from the design system.

You can easily add new components from the design system by importing them and adding them to the html! macro.

# Example of Adding a New Component

use yew::prelude::*;
use design_system::components::{banner::Banner, new_component::NewComponent};

#[function_component(HomeView)]
pub fn home_view() -> Html {
  html! {
        <div>
            <Banner />
            <NewComponent /> // Your new component here
            // Other components
        </div>
    }
}