Side-ui NPM | npm.io

Side-UI

Side-UI is a versatile and powerful UI Kit crafted exclusively for Indie Creators HQ. As a team of Hispanic developers passionate about side-projects, we understand the value of building robust and visually stunning user interfaces quickly and efficiently.

Introduction

At Indie Creators HQ, we believe in empowering developers like you with the right tools. Side-UI offers a collection of reusable and customizable React components, designed to meet the diverse needs of your projects, whether they are web applications, websites, or prototypes. With Side-UI, you can create delightful user experiences and focus on bringing your ideas to life.

Getting Started

Quick Setup

Before you can use side-UI, there are a couple of prerequisites you need to have in place:

Tailwind CSS: Make sure you have a working Tailwind CSS project set up.
Node.js and a Package Manager: Make sure you have Node.js installed on your machine.

npm

npm install side-ui

yarn

yarn install side-ui

pnpm

pnpm install side-ui

Include

Next, include Side-UI in your tailwind.config.js file to enable its components.

module.exports = {
  content: ['./node_modules/side-ui/**/*.{js,jsx,ts,tsx}'],
  presets: [require('./node_modules/side-ui/dist/tailwind.config')],
};

[ ↑ to top ↑ ]

It's that easy!!!.

How to use it

In this example, we import the Button component from side-ui, and then we use it in the MyComponent functional component. The Button is configured as a primary button with the base size, and when clicked, it logs "Button clicked" to the console.

This short example demonstrates the basic usage of the Button component, and you can easily customize it by using different variant, size, and other props according to your project's needs.

import React from 'react';
import { Button, ButtonVariant, ButtonSize } from 'side-ui';

export const MyComponent = () => {
  <Button
  variant={ButtonVariant.primary}
  size={ButtonSize.base}
  onClick={() => console.log('Button clicked')}>
    Click Me
  </Button>
}

export default MyComponent;

Using Enums in Side-UI Components

Several components in Side-UI utilize enums to provide customizable options for different variations and styles. Enums are sets of named constants representing discrete values, allowing you to choose from predefined options when using the components.

Example

In the Button component, you can use the ButtonVariant enum to choose from different button styles, such as ButtonVariant.primary, ButtonVariant.secondary, and more.

import { Button, ButtonVariant } from 'side-ui';

const MyComponent = () => {
  return (
    <div>
      <Button variant={ButtonVariant.primary} >
        Click Me
      </Button>
      <Button variant={ButtonVariant.secondary}>
        Click Me Too
      </Button>
    </div>
  );
};

Visual Example

primary_example fsecondary_example

Benefit from Consistency

Enums help maintain consistency throughout your application, ensuring that components adhere to predefined styles and variants. They provide a clear set of options, making it easier to understand and use the components effectively.

[ ↑ to top ↑ ]

Updating colors

Access the tailwind.config.js File
Ensure you have the tailwind.config.js file in your project. If it doesn't exist, create it at the root of your project.
Update the colors Section
In the tailwind.config.js file, locate the colors section under the theme object. This section defines the primary and secondary colors, among others. The colors are specified using a numeric scale, where each number corresponds to a different shade of the color.

Here's an example of how you can set your custom primary and secondary colors:

module.exports = {
  // ... other configurations ...

  theme: {
    // ... other theme configurations ...

    // Extend the colors section to define your custom primary and secondary colors

    extend: {
      colors: {
        primary: {
          50: '#FEFFD6',
          100: '#FEFFAD',
          200: '#FDFF85',
          300: '#FCFF5C',
          400: '#FCFF33',
          500: '#FAFF00',
          600: '#DDE000',
          700: '#B5B800',
          800: '#8C8F00',
          900: '#646600',
          950: '#3C3D00',
        },
        secondary: {
          50: '#ECEDFD',
          100: '#C7C8FA',
          200: '#A1A3F7',
          300: '#7C7EF4',
          400: '#6366F1',
          500: '#4346EF',
          600: '#1E21EB',
          700: '#1215CE',
          800: '#0F11A9',
          900: '#0B0D83',
          950: '#080A5E',
        },
      },
    },
  },

  // ... other configurations ...
};

[ ↑ to top ↑ ]