Edene

Edene aims to give you everything you need to create and build top class products. It contains completely customizable and reusable React components, animations and hooks. It has been entirely written in Typescript.

Edene also comes with another library called foundations, a serie of guidelines and tokens, which give programmers all the necessary to create efficient and eye catching user interfaces, following design principles, and with a focus on user experience.

Edene is not only a component library, goes far beyond that.

Documentation index

Please familiarise yourself with our:

• Changelog
• Contributing Guidelines

Getting started

We recommend installing the following packages first:

• react
• @emotion/react
• @emotion/styled

$ yarn add react @emotion/react @emotion/styled

See Using Emotion for guidance on how to configure Babel to use Emotion's css prop.

We publish the library with components written in React and Emotion. You can use your favourite package manager.

$ yarn add @edene/foundations @edene/components

Foundations library have to be installed along components at this point

Then, wrap your application with ThemeProvider, which comes from @edene/foudations. You can also override the theme through a parameter. See more on Theme docs.

Finally, import any of the components in your application and use it:

import { Accordion, AccordionRow } from '@edene/components';

For most of the components you also need to add support for Google Icons. Add to your HTML.

<link
    rel="stylesheet"
    type="text/css"
    href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
/>

Or optionally to your SCSS.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined');

Developer Guide

• Overriding Styles
• Theme
• Colors

Use it anywhere

Following is a project application working in different modern environments

| Environment | App name | Github repository | Notes | | --------------------- | :-----------------: | ------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | | create-react-app (Js) | Todo-list | Todo-list on Github | | | Next.js | My personal webpage | My personal webpage on Github | Next.js v13+ components using Edene need to add 'use client' at the begging of the file | | React app (Nx) | food-delivery | Food-delivery on Github | |