MARVEL UI

A Marvelous Component Library


Installation Guide

You can use the MARVEL UI library by adding our stylesheet to your website. To get started add the following link element in your head element of the HTML file.

<link  rel="stylesheet"  href="https://marvel-ui.vercel.app/css/marvel-ui.css"/>

Visit docs to learn more.


Components Marvel UI Provides

  • Alert

    • Simple Alert
    • Alert With icon
    • Alert with dismiss
  • Avatar

    • Image Avatar
    • Text Avatar
  • Badge

    • Badge on avatar
    • Badge on icons
  • Button

    • Simple, Primary, Secondary button
    • Outline button
    • Button with link
    • Button with icon
  • Card

    • Text only card
    • Verical Card
    • Horizantal Card
    • Card with text overlay
    • Card with dismiss
  • Input

    • Simple Input form fields
    • Input and Textarea with validation
  • Image

    • Responsive Image
    • Round Image
  • Typography

    • Headings
    • Paragraphs
    • Text utility classes
  • Navigation

    • Simple Desktop Navigation
    • Simple Mobile Drawer
  • List

    • Simple Spaced List (Vertical & Horizontal)
    • Stacked List
  • Ratings

    • Static Ratings
  • Grid

    • Grid 2
    • Grid 3
    • Grid 4
    • Grid Auto
  • Snackbar

    • Leading
    • Baseline (Center)
    • Trailing
  • Modal

    • Alert Modal
    • Simple (Chooser) Modal
    • Confirmation Modal
  • Range Slider

    • Price Range Slider

Connect With Me


preview