Skip to content

A simple design sytem built with React and documented with Storybook

License

Notifications You must be signed in to change notification settings

enoquetembe/design-system

Repository files navigation

Enoque UI    |    Installation    |    Example    |    Technologies    |    How to run the project locally    |    Contributing    |    License

Cover

Enoque UI

Enoque UI is my personal Design System that provides a set of reusable components and guidelines to create consistent and beautiful user interfaces. Is a collection of components, styles, and best practices that I've put together to help me build delightful user experiences across all my projects. By using Enoque UI, I ensure that my design choices and visual language remain consistent throughout the applications I develop. Click here to see the documentation of this design system on Storybook

Installation

Enoque UI comes with 2 packages than can be installed separately

  • @enoque-ui/tokens : All colors, font sizes, font weights, font families, line heights, radii and spacings.
  • @enoque-ui/react : React.js port of Enoque UI components.

Example

Here is a simple example using Enoque UI within a React project:

   //  Import the required components in your project:
  import { Button, Box, TextInput } from 'enoque-ui/react';

  function MyComponent() {
  return (
    <Box>
      <TextInput placeholder="Enter your name" />
      <Button
        onClick={() => {}}
        size="md"
        variant="primary"
      >
        Send
      </Button>
    </Box>
  );
};

Technologies

This project was developed with the following technologies:

How to run the project locally

Prerequisites

You must have Node.js and git installed

Install the project

Open a terminal follow the steps bellow

  1. Clone the repository:
 $ git clone https://github.com/enoquetembe/design-system.git
  1. Go to the project directory
cd design-system
  1. Install depedencies
npm install
  1. Start the project
npm run dev

Contributing

Pull Requests are welcome. For major changes, please open an issue to discuss what and which kind of changes you want to perform.
Follow these steps to make your contribution.

1. Fork the repository

2. Create your feature branch

# To make it easier name this branch with your username or with the name of the feature you added
$ git checkout -b feat/MyFeature

3. Commit your changes

 $ git commit -m 'feat: Adding my feature'

4. Push to your feature branch

 $ git push origin feat/MyFeature

5. Open a Pull Request


Let's work together. 😁

License

This project is under MIT Lincese CLICK HERE to read the file about the license.


Made with ❤ by Enoque Tembe

About

A simple design sytem built with React and documented with Storybook

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published