Github Stars:
Last Commit: 
Created: 
Overview
Posh UI is a design library that allows users to quickly and efficiently design projects. It offers a wide range of components and features, including alerts, avatars, badges, buttons, cards, CSS grid, images, inputs, lists, modals, navigation, ratings, sliders, toasts, tooltips, and typography. These components can be easily integrated into web projects, making them more interactive and visually appealing.
Features
- Alert: Displays a message to the user. Types of alerts include danger, info, primary, secondary, success, and warning.
- Avatar: Displays a user profile picture. Different types of avatars are available.
- Badge: Shows user status or notification count. Can be added to icons or avatars.
- Button: Used for user interaction on web pages. Includes types such as filled primary, outlined primary, link, icon, and floating buttons.
- Card: Displays content on e-commerce or video library apps. Can also be used to provide user feedback. Types of cards include horizontal text, vertical item, text overlay, and dismiss card with shadow.
- CSS Grid: Helps structure elements in rows and columns. Offers various grid layouts.
- Image: Displays large pictures on websites. Includes round, square, and responsive images.
- Input: Allows users to input information on the website. Types of inputs include text area, form input, and error form input.
- List: Displays lists of items. Includes numbered, reversed, lower roman, lower alpha, disc, circle, square, category checkbox, price radio, and notification stacked lists.
- Modal: Creates dialog boxes for user interaction.
Installation
To start using the components in your project, follow these steps:
- Copy and paste the stylesheet
<link>into your<head>tag before all other stylesheets to load the CSS:
<link rel="stylesheet" href="path/to/posh-ui.css">
- Some Posh UI components require JavaScript to function properly. Copy and paste the following
<script>tag near the end of your pages, just before the closing</body>tag:
<script src="path/to/posh-ui.js"></script>
Summary
Posh UI is a powerful design library that offers a wide range of components and features to enhance web projects. With its easy installation process and customizable options, users can quickly design and implement interactive and visually appealing websites. Whether you need to display alerts, create user profiles, add interactive buttons, or structure elements using CSS grid, Posh UI has you covered. Its comprehensive documentation provides all the necessary information and examples to get started quickly.
