Swayam UI React Component Library

Swayam UI is a collection of reusable React components that make building user interfaces easier. This documentation focuses on the available button components.

Installation

You can install Swayam UI using npm:

npm install swayamui

Documentation

Buttons

There are seven varieties of buttons available in Swayam UI:

• Primary: A primary button for important actions.
• Secondary: A secondary button for less important actions.
• Info: An informational button.
• Warn: A warning button for alerting users.
• Delete: A button for delete actions.
• Custom: A customizable button with a specified color.
• Fancy: A fancy button with a unique style.

How to Use

To use these buttons,

import the desired button component and provide the required text prop.

For the 'ButtonCustom', you can also specify the 'color' color = 'any color' as second agrument

import React from 'react';
import {
  ButtonCustom,
  ButtonDelete,
  ButtonFancy,
  ButtonInfo,
  ButtonPrimary,
  ButtonSecondary,
  ButtonWarn,
} from 'swayamui';

function App() {
  return (
    <>
      <ButtonPrimary text='Primary' />
      <ButtonSecondary text='Secondary' />
      <ButtonInfo text='Info' />
      <ButtonWarn text='Warning' />
      <ButtonDelete text='Delete' />
      <ButtonCustom color='pink' text='Custom' />
      <ButtonFancy text='What ever!!' />
    </>
  );
}

export default App;

These buttons offer a variety of styles and can be customized to fit your application's design. Explore the different options to enhance your UI with Swayam UI components.

Navbar

The Navbar component in Swayam UI provides a customizable navigation bar for your web application. Here's how to use it:

Install react-router-dom if you haven't already. This package is commonly used for routing in React applications. You can install it using npm:

npm install react-router-dom

Import and wrap your App component with BrowserRouter from 'react-router-dom' in your main application file (usually index.js or App.js).

<BrowserRouter>
    <React.StrictMode>
        <App />
    </React.StrictMode>
</BrowserRouter>

How to Use

1. Include the Navbar component in your React component, providing the following props:

• menuItems: An array of menu items to display in the navigation bar.
• color: The background color of the navigation bar.

<Navbar menuItems={["About", "Services", "Contact", "Developer"]} color={'#001d6b'}>
  Website Name
</Navbar>

NOTE - The routes for the navigation will be same as the names given in the array

2. Include Path and Routes to give the navigation

<Routes>
    <Route path="/" element={<Outlet />}>
        <Route path="about" element={<About />} />
        <Route path="services" element={<Services />} />
        <Route path="contact" element={<Contact />} />
        <Route path="developer" element={<Developer />} />
    </Route>
</Routes>

NOTE - The Given JSX pages should be made before using this

Card

The Card1 component is designed to display content in a card-like format. It accepts the following props for customization:

• imageUrl (string, required): The URL of the image to display in the card.

• title (string, required): The main heading or title for the card.

• subtitle (string, required): A subtitle or tagline for the card.

• buttonText (string, required): The text for the button displayed in the card.

• btnAction (function): Handling onClick event for the button.

Usage

To use the Card1 component, import it and pass the necessary props as shown in the example below:

import React from 'react';
import { Card1 } from 'swayamui';

function App() {
  return (
    <Card1
      imageUrl='https://miro.medium.com/v2/resize:fit:3840/1*xMuIOwjliGUPjkzukeWKfw.jpeg'
      title='Heading 1'
      subtitle='Tag Line tag Line tag Line tag Line tag Line tag Line tag Line tag Line tag Line tag Line'
      buttonText='Click Me!!'
    />
  );
}

export default App;

Thank You Stay Updated Adding More Features Shortly