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

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:

• React.js
• Stiches
• Storybook
• TypeScript
• Vite

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

2. Go to the project directory

cd design-system

3. Install depedencies

npm install

4. 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