Swift UI is an HTML CSS based UI toolkit, a light weight and modular library for developing fast and powerful web interfaces.
swiftui-demo.mp4
- HTML
- CSS
- Vanilla JS
To start using the components in your project import the stylesheet in your css or html file.
- For linking in HTML use
<link rel="stylesheet" href="https://swift-ui.netlify.app/components/swift.css">
- For linking in CSS use
@import url("https://swift-ui.netlify.app/components/swift.css");
Alert are used to attract user's attention for important information without interrupting the user's flow.
We have 6 types of Alerts
- Primary Alert
- Secondary Alert
- Success Alert
- Warning Alert
- Danger Alert
- Alert with icon
Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.
We have 2 types of Avatars
- Image Avatar
- Text Avatar
Badges are being used to display a notification count or status information
We have 2 types of Badges
- Status Badge
- Number Badge
Button is a trigger that allows user to take action. You may use a tag or button element or input element, you need to add respective classes, and you are good to go.
We have 4 types of Buttons
- Solid Buttons
- Outline Buttons
- Icon Buttons
- Disabled Buttons
Images can be responsive to fit the parent's width, and also can be customised to be round or square shaped
We cover 3 types of Images
- Responsive Image
- Round Image
- Square Image
Toast is mostly used to show feedback message. Snackbar is to used show message that need user action. This component can be used for toast or snackbar component.
We cover 3 types of Toasts
- Success Toast
- Error Toast
- Info Toast
Card are used to show user's collectively data, like e-commerce product details.
We have 4 types of Cards
- Horizontal Cards
- Vertical Cards
- Card with Text Overlay
- Text only Cards
Modals are positioned over everything else in the document and remove scroll from the page. It gets closed only with close button on modal pop-up.
We cover the following modal
- Simple Modal
Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.
We have 3 types of Lists
- Simple List
- Stacked List
- Inline List
Inputs are used to collect data from users directly in form of texts, numbers, clicks, checkboxes, radio buttons etc.
We have 3 types of Inputs
- Simple Input (Used in a form)
- Valid/Invalid Inputs
- Disabled/Readonly Inputs
Navigation bar is used to navigate through the web apps or websites.
We cover the following navigation
- Simple Navigation (Desktop)
Navigation bar is used to navigate through the web apps or websites.
We cover the following navigation
- Simple Navigation (Desktop)
Rating components can be used as to get user feedbacks, or to provide insights regarding others' opinions and experiences.
We cover the following rating
- Standard Rating
Use grid when you want sections in view
We have 2 types of grid layout
- Grid 2 layout
- Grid 3 layout