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. It's a dependency, so you don't need to worry about installing it
Edene is not just a component library, it goes far beyond that.
Please familiarise yourself with our:
We recommend usig edene with react applications
$ yarn add @edene/componentsEdene also uses Emotion:
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.
Then, wrap your application with ThemeProvider, which comes from @edene/foudations. You can also override the theme using the theme prop. See more on Theme docs.
Finally, to use a components in your application, you just have to import 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');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 |