CSS Component Library - OSP Components

Welcome to the OSP-Components component library! This library provides pre-styled CSS classes that you can use in your React applications to quickly style your components.

Installation

To use the OSP-Components component library in your React application, follow these steps:

1. Install the library:

npm install css_component_lib

2. Import the CSS file into your React application:

In your React component files where you want to use the styles from the library, import the styles.css file from the installed package. This step ensures that the styles are included in your application and can be used across your components.

import 'css_component_lib/styles.css'

3. Use the CSS classes in your components:

You can use the CSS classes defined in styles.css directly in your JSX. These classes provide pre-styled elements that you can use to quickly style your components without writing custom CSS.

<div className="your-css-class">
  {/* Your component content */}
</div>

Components

• Alert: Displays important messages or notifications to the user.
• Avatar: Represents a user's profile image or icon.
• Badges: Displays small pieces of information, like counts or statuses, in a visually appealing manner.
• Button: Provides clickable elements for triggering actions.
• Rating: Allows users to rate items or provide feedback using a star-based rating system.
• Card: Organizes content into a visually appealing container with defined sections.
• Grid: Arranges content into a flexible grid layout for better organization and alignment.
• Image: Displays images within the application interface.
• Input: Provides input fields for users to enter data or make selections.
• Lists: Displays a collection of items in a structured list format.
• Navigation: Provides navigation elements for moving between different sections or pages of the application.
• Slider: Allows users to select a value within a specified range by dragging a handle along a track.
• Modal: Displays content in a popup window that overlays the main content of the page.
• Snackbar: Shows temporary messages or notifications at the bottom of the screen.
• TextUtils: Provides utility functions for manipulating text content, such as formatting or truncating.