An HTML-based UI toolkit for the web; sensible UI design, and a friendly development experience. No need to start from scratch, StarlingUI is an open-source component library that gives designers and developers the components they need to create engaging product experiences
Live Website: Starling UI
StarlingUI.mp4
StarlingUI-Mobile.mp4
To start using the components in your project, you will have to import the library either in your HTML or CSS file:
<link rel="stylesheet" href="https://starlingui.netlify.app/sui.css" />@import url("https://starlingui.netlify.app/sui.css");Convey meaning through color. In this component, you will find the color palette used to design StarlingUI
Check it out at: https://starlingui.netlify.app/pages/getting-started/colors.html
Use Typography to to present your design and content as clearly and efficiently as possible.
StarlingUI covers the following types of Typography:
- Headings
- Font Weight
- Text Color Classes
- Background Color Classes
Check it out at: https://starlingui.netlify.app/pages/getting-started/typography.html
Avatars can be used as a graphical representation of a person through a profile picture or image, an icon, or a string with initials.
StarlingUI covers the following types of Avatar:
- Profile Avatar
- Square Avatar
- Text Avatar
Check it out at: https://starlingui.netlify.app/pages/components/avatar/avatar.html
Badge generates a small badge at the bottom-left / bottom-right of an avatar and at the top-right of an icon.
It can be used to show either status of the user (online / offline / Away) or you can use it show a count.
StarlingUI covers the following types of Badge:
- Status & Icon Badge
- Square Status Badge
Check it out at: https://starlingui.netlify.app/pages/components/badge/badge.html
Alerts displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
StarlingUI covers the following types of Alert:
- Simple & Standard Alert
- Info Alert
- Success Alert
- Warning Alert
- Danger Alert
Check it out at: https://starlingui.netlify.app/pages/components/alert/alert.html
Buttons allow users to take actions, and make choices, with a single tap.
StarlingUI covers the following types of Button:
- Standard Button
- Rounded Button
- Rounded Fill Button
- Outline Button
- Outline Rounded Button
- Outline Rounded Fill Button
- Text, Floating button and button with Icon
Check it out at: https://starlingui.netlify.app/pages/components/button/button.html
Cards contains content and actions about a single subject. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
StarlingUI covers the following types of Card:
- Standard Card (Vertical)
- Horizontal Card
- Text and Dismiss Card
Check it out at: https://starlingui.netlify.app/pages/components/card/card.html
by default, a StarlingUI image fills in and takes 100% width of its container
StarlingUI covers the following types of Image:
- Responsive Image
- Round Image
Check it out at: https://starlingui.netlify.app/pages/components/image/image.html
by default, a StarlingUI input can be used with an overhead label. It also provides the option of showing an overhead validation message.
StarlingUI covers the following types of Input:
- Text Input
- Input with validation
- Input with Icon
- Text Area
Check it out at: https://starlingui.netlify.app/pages/components/input/input.html
Lists are continuous, vertical indexes of text or images.
StarlingUI covers the following types of Lists:
- Simple Lists
- Stacked / Notification Lists
Check it out at: https://starlingui.netlify.app/pages/components/lists/lists.html
Navigation allows movement between primary destinations in an app.
StarlingUI covers the following types of Navigation:
- Simple Navigation Bar (Desktop)
- Responsive Navigation Bar (Mobile)
Check it out at: https://starlingui.netlify.app/pages/components/navigation/navigation.html
Modals provide a solid foundation for creating dialogs, popovers etc.
StarlingUI covers the following types of Modal:
- Simple Modal
Check it out at: https://starlingui.netlify.app/pages/components/modal/modal.html
Rating provides insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.
StarlingUI covers the following types of Rating:
- Standard Rating
Check it out at: https://starlingui.netlify.app/pages/components/rating/rating.html
Toast provides brief notifications. The component is also known as Snackbar.
StarlingUI covers the following types of Toast:
- Simple Toast
Check it out at: https://starlingui.netlify.app/pages/components/toast/toast.html
Grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Starling UI is based on a 12-column responsive grid layout.
StarlingUI covers the following types of Grid:
- Horizontal Grid system
- Vertical Grid system
- Flexible Grid system
Check it out at: https://starlingui.netlify.app/pages/components/grid/grid.html
Slider allows users to make selections from a range of values.
StarlingUI covers the following types of Slider:
- Standard Slider
- Slider with Icon
- Disabled Slider with Icon
Check it out at: https://starlingui.netlify.app/pages/components/slider/slider.html