vikasnu1307 / generic-component

Buttons , dropdowns , sections , cards , form, calendar, pagination, notification, filters, grid, popup, label, checklist

Generic Component

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Overview

Welcome to the Component Library! This library provides a set of reusable UI components to enhance and streamline your web development projects.

Components

Buttons

• Primary Button: Description and usage information.
• Secondary Button: Description and usage information.
• Outlined Button: Description and usage information.

Dropdowns

• Single-select Dropdown: Description and usage information.
• Multi-select Dropdown: Description and usage information.
• Customizable Dropdown: Description and usage information.

Sections

• Section Header: Description and usage information.
• Content Section: Description and usage information.
• Sidebar Section: Description and usage information.

Cards

• Image Card: Description and usage information.
• Content Card: Description and usage information.
• Interactive Card: Description and usage information.

Forms

• Input Form: Description and usage information.
• Textarea Form: Description and usage information.
• Checkbox Form: Description and usage information.

Calendar

• Monthly Calendar: Description and usage information.
• Event Calendar: Description and usage information.

Pagination

• Basic Pagination: Description and usage information.
• Advanced Pagination: Description and usage information.

Notifications

• Alert Notification: Description and usage information.
• Toast Notification: Description and usage information.

Filters

• Filter Bar: Description and usage information.
• Tag Filters: Description and usage information.

Grid

• Responsive Grid: Description and usage information.
• Masonry Grid: Description and usage information.

Popups

• Modal Popup: Description and usage information.
• Tooltip Popup: Description and usage information.

Labels

• Text Label: Description and usage information.
• Badge Label: Description and usage information.

Checklist

• Task Checklist: Description and usage information.
• Interactive Checklist: Description and usage information.

Contributing

We welcome contributions! If you have ideas for improvements or new components, feel free to submit a pull request.

License