Shuttle - UI

A powerful front-end framework for developing beautiful websites faster.

---

Installation Guide

To add Shuttle-UI to your project, include the following stylesheet link in your head tag before all other stylesheets.

<link rel="stylesheet" href="https://shuttle-ui.netlify.app/Components/main.css">

Component List

1. Alert

   1. Default alert
   2. Alert statuses
   3. Alert variants
   4. Alert with links
   5. Alert with icon
   6. Dismissible alert

2. Avatar

   1. Default avatar
   2. Avatar sizes
   3. Avatar with icons
   4. Avatar with initials
   5. Avatar with badge

3. Badge

   1. Default badge
   2. Coloured badges
   3. Badge variants
   4. Pill badges
   5. Button with badge
   6. Text with badge
   7. Badge on icons
   8. Badge on avatars

4. Button

   1. Default button
   2. Coloured buttons
   3. Button sizes
   4. Button variants
   5. Button with icons
   6. Floating button

5. Cards

   1. Vertical Card
   2. Card with badges
   3. Card with dismiss
   4. Card with text overlay
   5. Text only card
   6. Horizontal card
   7. Card with shadow

6. Responsive Images

   1. Horizontal resizable image
   2. Vertical resizable image
   3. Rounded image

7. Input

   1. Default Input
   2. Input sizes
   3. Input styles
   4. Input validations

8. List

   1. Spaced lists
   2. Stacked lists

9. Navigation

   1. Default navigation
   2. Navigation with only menu items
   3. E-commerce navigation example
   4. Social media navigation example

10. Text Utilities

    1. Headings
    2. Text alignments
    3. Text sizes
    4. Bold, italics, underlined and strikethrough texts
    5. Font colours

11. Grid

    1. 3 column grid
    2. 2 column grid

12. Modal

    1. Default Modal

13. Toast

    1. Default toast
    2. Translucent toast
    3. Toast placement

14. Rating

    1. Star rating
    2. Radio button rating

You can checkout the documentation at Shuttle-UI

Technology Used

Component library is made using HTML and CSS and it is hosted on Netlify

Demonstration

Shuttle-UI.mp4