{"id":16486553,"url":"https://github.com/hsnice16/poshui-documentation","last_synced_at":"2025-07-15T10:40:43.201Z","repository":{"id":39179741,"uuid":"453166350","full_name":"hsnice16/PoshUI-Documentation","owner":"hsnice16","description":"Posh UI is a continuously developing Component Library, built using HTML5 and CSS3 only.","archived":false,"fork":false,"pushed_at":"2022-06-01T14:15:35.000Z","size":16401,"stargazers_count":6,"open_issues_count":3,"forks_count":6,"subscribers_count":2,"default_branch":"development","last_synced_at":"2024-05-02T06:11:37.287Z","etag":null,"topics":["component-library","css3","css3-flexbox","css3-grid","html5"],"latest_commit_sha":null,"homepage":"https://poshui.netlify.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsnice16.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-28T17:58:37.000Z","updated_at":"2024-03-24T08:18:58.000Z","dependencies_parsed_at":"2022-08-30T04:41:07.210Z","dependency_job_id":null,"html_url":"https://github.com/hsnice16/PoshUI-Documentation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnice16%2FPoshUI-Documentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnice16%2FPoshUI-Documentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnice16%2FPoshUI-Documentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnice16%2FPoshUI-Documentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsnice16","download_url":"https://codeload.github.com/hsnice16/PoshUI-Documentation/tar.gz/refs/heads/development","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219860731,"owners_count":16556011,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","css3","css3-flexbox","css3-grid","html5"],"created_at":"2024-10-11T13:29:40.984Z","updated_at":"2025-02-12T20:35:54.957Z","avatar_url":"https://github.com/hsnice16.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg alt=\"poshui logo\" src=\"assets/brand-logos/brand-logo.png\" width=\"150px\" height=\"150px\" /\u003e\n\n# Posh UI\n\nNow design your project faster and better with Posh UI\n\n![Forks](https://img.shields.io/github/forks/hsnice16/PoshUI-Documentation)\n![Stars](https://img.shields.io/github/stars/hsnice16/PoshUI-Documentation)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/a1fe7d1f-75e9-4c30-bd3a-8df76d74c08c/deploy-status)](https://app.netlify.com/sites/poshui/deploys)\n\n\u003c/div\u003e\n\n---\n\n## Quick Start\n\nTo start using the components in your project, Copy-paste the stylesheet `\u003clink\u003e` into your `\u003chead\u003e` before all other stylesheets to load our CSS.\n\n```html\n    \u003clink\n        rel=\"stylesheet\"\n        href=\"https://poshui-components.netlify.app/css/main.css\"\n    /\u003e\n```\n\nMany of Posh UI components, like Modal, Toast, and others, require the use of JavaScript to function. For proper functioning of those, Copy-paste the following `\u003cscript\u003e` near the end of your pages, right before the closing `\u003c/body\u003e` tag, to enable them.\n\n```html\n    \u003cscript \n        src=\"https://poshui-components.netlify.app/js/main.js\"\u003e\n    \u003c/script\u003e\n```\n\n### Posh UI contains the following components\n\n- [Alert](#alert)\n- [Avatar](#avatar)\n- [Badge](#badge)\n- [Button](#button)\n- [Card](#card)\n- [CSS Grid](#css-grid)\n- [Image](#image)\n- [Input](#input)\n- [List](#list)\n- [Modal](#modal)\n- [Navigation](#navigation)\n- [Rating](#rating)\n- [Slider](#slider)\n- [Toast](#toast)\n- [Tooltip](#tooltip)\n- [Typography](#typography)\n\n---\n\n### Alert\n\nAlerts can be used to show a message to the user.\n\nYou will find the following types of _Alert_ on https://poshui.netlify.app/pages/components/alert.html\n\n- Danger Alert\n- Info Alert\n- Primary Alert\n- Secondary Alert\n- Success Alert\n- Warning Alert\n\n---\n\n### Avatar\n\nAvatars can be used for user profile picture.\n\nYou will find the following types of _Avatar_ on https://poshui.netlify.app/pages/components/avatar.html\n\n- Same Sized Avatars\n- Different Sized Avatars\n\n---\n\n### Badge\n\nBadge can be used to show either status of the user (online, or offline) or you can use it show notification count.\n\nYou will find the following types of _Badge_ on https://poshui.netlify.app/pages/components/badge.html\n\n- Badge on Icons\n- Badge on Avatars\n\n---\n\n### Button\n\nButtons can be used to make your web page interactive to your user. You can use them to take user action.\n\nYou will find the following types of _Button_ on https://poshui.netlify.app/pages/components/button.html\n\n- Filled Primary Buttons\n- Outlined Primary Buttons\n- Link Button\n- Icon Button\n- Floating Button\n\n---\n\n### Card\n\nCards can be proved very useful. You can use them to display content on an e-commerce app, or on a video library app. You can also use them to show user feedback in the form of text-only card on your site.\n\nYou will find the following types of _Card_ on https://poshui.netlify.app/pages/components/card.html\n\n- Horizontal Text Card\n- Vertical Item Card\n- Text Overlay Card\n- Dismiss Card with Shadow\n\n---\n\n### CSS Grid\n\nCSS Grid can be used to structure elements in rows and columns.\n\nYou will find the following types of _Grid_ on https://poshui.netlify.app/pages/layout/css-grid.html\n\n- Two Columns Grid\n- Two Rows Grid\n- Three Columns Grid\n- Three Columns Grid\n\n---\n\n### Image\n\nImage can be used to display large picture on the website.\n\nYou will find the following types of _Image_ on https://poshui.netlify.app/pages/components/image.html\n\n- Round Image\n- Square Image\n- Responsive Image\n\n---\n\n### Input\n\nInput can be used to take input from your user. It can make your site more interactive.\n\nYou will find the following types of _Input_ on https://poshui.netlify.app/pages/components/input.html\n\n- Text Area\n- Form Input\n- Error Form Input\n\n---\n\n### List\n\nList can be used to show a list of items.\n\nYou will find the following types of _List_ on https://poshui.netlify.app/pages/components/list.html\n\n- Numbered List\n- Reversed List\n- Lower Roman List\n- Lower Alpha List\n- Disc List\n- Circle List\n- Square List\n- Category Checkbox List\n- Price Radio List\n- Notification Stacked List\n\n---\n\n### Modal\n\nModal can be used for creating dialog boxes, to communicate with user.\n\nYou will find the following types of _Modal_ on https://poshui.netlify.app/pages/components/modal.html\n\n- Modal Component\n- Modal Demo\n\n---\n\n### Navigation\n\nNavigation can be used to give the user facility to navigate between\ndifferent pages.\n\nYou will find the following types of _Navigation_ on https://poshui.netlify.app/pages/components/navigation.html\n\n- Desktop Variation One\n\n---\n\n### Rating\n\nRating can be used to show ratings on the product, or it can also be\nused for taking ratings from the user.\n\nYou will find the following types of _Rating_ on https://poshui.netlify.app/pages/components/rating.html\n\n- Filled Rating\n- Live Rating\n\n---\n\n### Slider\n\nSlider can be used to take user input based on some range.\n\nYou will find the following type of _Slider_ on https://poshui.netlify.app/pages/components/slider.html\n\n- Input Slider\n\n---\n\n### Toast\n\nToast can be used to show notifications to the user.\n\nYou will find the following types of _Toast_ on https://poshui.netlify.app/pages/components/toast.html\n\n- Notification Toast\n- Notification Toast Demo\n- Stacked Notification Toast Demo\n\n---\n\n### Tooltip\n\nTooltip can be used to show user some information, when user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small \"hover box\" with information about the item being hovered over.\n\nYou will find the following types of _Tooltip_ on https://poshui.netlify.app/pages/components/tooltip.html\n\n- Left Tooltip\n- Right Tooltip\n\n---\n\n### Typography\n\nUse Typography to format text content on your web site.\n\nYou will find the following types of _Typography_ on https://poshui.netlify.app/pages/getting-started/typography.html\n\n- Display\n- Headings\n- Alignment\n- Inline text elements\n\n---\n\n## 👨‍💻 Connect with me\n\n\u003ca href=\"https://twitter.com/hsnice16\"\u003e\u003cimg src=\"https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge\u0026logo=twitter\u0026logoColor=white\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/hsnice16/\"\u003e\u003cimg src=\"https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\"/\u003e\u003c/a\u003e\n\n---\n\n![posh ui gif](assets/gifs/posh-ui.gif)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\nHave a look at the implementation of [Posh UI Components](https://github.com/hsnice16/PoshUI-Components).\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsnice16%2Fposhui-documentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsnice16%2Fposhui-documentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsnice16%2Fposhui-documentation/lists"}