Installation

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/napthedev/squishyui/css/main.min.css">
      

Components

Alert

        <div class="alert">Normal Alert</div>
<div class="alert alert-primary">Primary Alert</div>
<div class="alert alert-secondary">Secondary Alert</div>
<div class="alert alert-warning">Warning Alert</div>
<div class="alert alert-error">Error Alert</div>
      

Avatar

Rounded Avatar

        <img class="avatar" src="Your Avatar Src" alt="" />
      

Avatar Sizes

        <img class="avatar-sm" src="Small Avatar Src" alt="" />
<img class="avatar" src="Medium Avatar Src" alt="" />
<img class="avatar-lg" src="Large Avatar Src" alt="" />
      

Breadcrumb

        <div class="breadcrumb">
  <div class="breadcrumb-item">
    <a href="#">Home</a>
  </div>
  <div class="breadcrumb-item">
    <a href="#">User</a>
  </div>
  <div class="breadcrumb-item">
    <a href="#">Library</a>
  </div>
  <div class="breadcrumb-item">
    <a href="#">Images</a>
  </div>
</div>
      

Buttons

Colors

        <button>Normal</button>
<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-warning">Warning</button>
<button class="btn-error">Error</button>
<button class="btn-dark">Dark</button>
      

Outline Buttons

        <button class="btn-outline">Normal</button>
<button class="btn-outline btn-primary">Primary</button>
<button class="btn-outline btn-secondary">Secondary</button>
<button class="btn-outline btn-warning">Warning</button>
<button class="btn-outline btn-error">Error</button>
<button class="btn-outline btn-dark">Dark</button>
      

Buttons Group

        <div class="btn-group">
  <button>Normal</button>
  <button class="btn-primary">Primary</button>
  <button class="btn-secondary">Secondary</button>
  <button class="btn-warning">Warning</button>
  <button class="btn-error">Error</button>
  <button class="btn-dark">Dark</button>
<div>
      

Outline Buttons Group

        <div class="btn-group">
  <button class="btn-outline">Normal</button>
  <button class="btn-outline btn-primary">Primary</button>
  <button class="btn-outline btn-secondary">Secondary</button>
  <button class="btn-outline btn-warning">Warning</button>
  <button class="btn-outline btn-error">Error</button>
  <button class="btn-outline btn-dark">Dark</button>
<div>
      

Button sizes

        <button class="btn-sm">Small Size</button>
<button>Medium Size</button>
<button class="btn-lg">Large Size</button>
      

Disabled

        <button disabled>Normal</button>
<button disabled class="btn-primary">Primary</button>
<button disabled class="btn-secondary">Secondary</button>
<button disabled class="btn-warning">Warning</button>
<button disabled class="btn-error">Error</button>
<button disabled class="btn-dark">Dark</button>
      

Badge

        <button>
  Normal
  <span class="btn-badge">9+</span>
</button>
<button class="btn-primary">
  Primary
  <span class="btn-badge btn-badge-primary">9+</span>
</button>
<button class="btn-secondary">
  Secondary
  <span class="btn-badge btn-badge-secondary">9+</span>
</button>
<button class="btn-warning">
  Warning
  <span class="btn-badge btn-badge-warning">9+</span>
</button>
<button class="btn-error">
  Error
  <span class="btn-badge btn-badge-error">9+</span>
</button>
<button class="btn-dark">
  Dark
  <span class="btn-badge btn-badge-dark">9+</span>
</button>
      

Card

        <div class="card" style="width: 100%; max-width: 400px">
  <div class="card-content">Lorem ipsum dolor sit amet</div>
</div>
      

Collapse

Accordion

        <!-- Remember to add tabindex 0 so that the element is focusable -->
<div class="collapse" tabindex="0">
  <div class="collapse-head">
    Click to reveal the content
    <span class="collapse-icon">
    <!-- Your Icon Goes Here -->
    <!-- For example: <i class="fas fa-chevron-down"></i> -->
    </span>
  </div>
  <div class="collapse-content">
    <div class="collapse-inner">Lorem ipsum, dolor sit amet</div>
  </div>
</div>
      

With button

        <div class="collapse inline" tabindex="0">
  <button>Reveal Content</button>
  <div class="collapse-content">
    <div class="collapse-inner">Lorem ipsum, dolor sit amet</div>
  </div>
</div>
      

Drawer

        <!-- Important div to separate drawers. Don't remove it -->
<div>
  <input type="checkbox" class="drawer-control" id="drawer-left-control" name="drawer-left-control" />
  <label class="btn" for="drawer-left-control">Open drawer</label>
  <label for="drawer-left-control" class="drawer-background"></label>
  <div class="drawer">
    <div class="drawer-header">
      <h3>Drawer Title</h3>
      <label for="drawer-left-control" class="cursor-pointer squishy">
      <!-- Icon goes here -->
      <!-- For example: <i class="fa fa-times" style="font-size: 25px"></i> -->
      </label>
    </div>
    <div class="drawer-content">
      <h3>Drawer Content</h3>
      <p>Lorem ipsum, dolor sit amet</p>
    </div>
  </div>
</div>
      

Drawer on the right

        <!-- Important div to separate drawers. Don't remove it -->
<div>
  <input type="checkbox" class="drawer-control" id="drawer-control" name="drawer-control" />
  <label class="btn" for="drawer-control">Open drawer</label>
  <label for="drawer-control" class="drawer-background"></label>
  <div class="drawer drawer-right">
    <div class="drawer-header">
      <h3>Drawer Title</h3>
      <label for="drawer-control" class="cursor-pointer squishy">
      <!-- Icon goes here -->
      <!-- For example: <i class="fa fa-times" style="font-size: 25px"></i> -->
      </label>
    </div>
    <div class="drawer-content">
      <h3>Drawer Content</h3>
      <p>Lorem ipsum, dolor sit amet</p>
    </div>
  </div>
</div>
      

Dropdown

Use with button

        <!-- Tabindex 0 is important -->
<div class="dropdown" tabindex="0">
  <button class="btn-primary">Open dropdown</button>
  <div class="dropdown-list">
    <div>Dropdown Item 1</div>
    <div>Dropdown Item 2</div>
    <div>Dropdown Item 3</div>
  </div>
</div>
      

Use with avatar

        <div class="dropdown" tabindex="0">
  <img class="avatar" src="Your Avatar Src" alt="" />
  <div class="dropdown-list">
    <div>View your profile</div>
    <div>Back to Home</div>
    <div>Sign Out</div>
  </div>
</div>
      

Align Left

        <div class="dropdown" tabindex="0">
  <button class="btn-primary">Open dropdown</button>
  <div class="dropdown-list dropdown-left">
    <div>Dropdown Item 1</div>
    <div>Dropdown Item 2</div>
    <div>Dropdown Item 3</div>
  </div>
</div>
      

Form

        <input type="text" class="input-underline" placeholder="Input Value..." />
<input type="text" class="input-outline" placeholder="Input Outline..." />
      

        <div>
  <input class="input-checkbox" type="checkbox" id="checkbox-1" />
  <label for="checkbox-1">Coding</label>
</div>
<div>
  <input class="input-checkbox" type="checkbox" id="checkbox-2" />
  <label for="checkbox-2">Sleeping</label>
</div>
      

        <div>
  <input class="input-radio" type="radio" id="html-radio" name="programming-languages" value="HTML" />
  <label for="html-radio">HTML</label>
</div>
<div>
  <input class="input-radio" type="radio" id="css-radio" name="programming-languages" value="CSS" />
  <label for="css-radio">CSS</label>
</div>
<div>
  <input class="input-radio" type="radio" id="javascript-radio" name="programming-languages" value="JavaScript" />
  <label for="javascript-radio">JavaScript</label>
</div>

List

        <div class="list">
  <div>List Item 1</div>
  <div>List Item 2</div>
  <div>List Item 3</div>
  <div>List Item 4</div>
  <div>List Item 5</div>
  <div>List Item 6</div>
</div>
      

Modal

        <!-- Important div to separate modals, don't remove it -->
<div>
  <!-- Checkbox to control the modal, keep the className, change the id to separate modals -->
  <input type="checkbox" class="modal-control" id="modal-control" name="modal-control" />
  <label class="btn" for="modal-control">Open modal</label>
  <label for="modal-control" class="modal-background"></label>
  <div class="modal">
    <div class="modal-header">
      <h3>Modal Title</h3>
      <label for="modal-control" class="cursor-pointer squishy">
        <i class="fa fa-times" style="font-size: 25px"></i>
      </label>
    </div>
    <div class="modal-content">
      <h3>Modal Content</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti fugit iste temporibus mollitia, dicta veniam qui sint omnis maxime exercitationem maiores impedit libero, eius officia obcaecati harum saepe consequuntur expedita.</p>
    </div>
  </div>
</div>
      

Progress

        <svg class="circular-progress" viewBox="25 25 50 50">
  <circle cx="50" cy="50" r="20"></circle>
</svg>

<!-- Customize the color -->
<svg class="circular-progress" viewBox="25 25 50 50">
  <circle style="stroke: red" cx="50" cy="50" r="20"></circle>
</svg>
      

Skeleton

        <div class="skeleton rounded-full"></div>
<div class="skeleton mt-3 w-full"></div>
      

Tooltips

        <button class="tooltips" data-tooltips="Top">Tooltips Top</button>
<button class="tooltips tooltips-bottom" data-tooltips="Bottom">Tooltips Bottom</button>
<button class="tooltips tooltips-left" data-tooltips="Left">Tooltips Left</button>
<button class="tooltips tooltips-right" data-tooltips="Right">Tooltips Right</button>
      

Utility Classes

Squishy

Class	Usage
squishy	Add hover and active scaling effect (Added by default to buttons)
no-squishy	Remove all effect above

Colors

Color Name	Hex Value
primary	#1e90ff
secondary	#11c930
warning	#ffdd12
error	#ff5000
light	#f0f0f0
dark	#111111
light-blue	#d5eafd
Class Name	Usage
text-*	Change text color
bg-*	Change background color

Spacing

Label	Pixel Value
0	0px
1	4px
2	8px
3	16px
4	24px
5	48px
Class Name	Usage
m-*	Margin on all side
mx-*	Margin on horizontal axis
my-*	Margin on vertical axis
mt-*	Margin top
mr-*	Margin right
mb-*	Margin bottom
ml-*	Margin left
p-*	Padding on all side
px-*	Padding on horizontal axis
py-*	Padding on vertical axis
pt-*	Padding top
pr-*	Padding right
pb-*	Padding bottom
pl-*	Padding left
gap-*	Gap between elements

Display

Class	Usage
block	Display block
inline-block	Display Inline Block
inline	Display Inline
flex	Display Flex
inline-flex	Display Inline Flex
table	Display Table
inline-table	Display Inline Table
grid	Display Grid
inline-grid	Display Inline Grid
none	Display None

Position

Class	Usage
static	Position Static
fixed	Position Fixed
absolute	Position absolute
relative	Position relative
sticky	Position Sticky

Flex

Class	Usage
flex-1	flex: 1 1 0%
Class	Flex Direction
flex-row	row
flex-row-reverse	row-reverse
flex-col	column
flex-col-reverse	column-reverse
Class	Justify Content
justify-start	flex-start
justify-end	flex-end
justify-center	center
justify-between	space-between
justify-around	space-around
justify-evenly	space-evenly
Class	Align Items
items-start	flex-start
items-end	flex-end
items-center	center
items-baseline	baseline
items-stretch	stretch
Class	Flex Wrap
wrap	flex wrap
wrap-reverse	flex wrap reverse
nowrap	flex no wrap

Percentage

Label	Percentage Value
0	0%
25	25%
75	75%
100%	100%
full	100%
Class Name	Usage
w-*	Width
h-*	Height
h-screen	100 view height
w-screen	100 view width

Container

Class	Usage
container	Add some padding for better spacing
Screen Sizes	Style
<768px	padding: 40px 5%
Normal	padding: 50px 10%
>1400px	padding: 60px 15%

Cursor

Class	Usage
cursor-default	Cursor: default
cursor-pointer	Cursor: pointer

Border Radius

Class	Usage
rounded	Border Radius 5px
rounded-full	Border Radius 99999px

Responsive Image

        .responsive-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
      

Text Align

Class	Text Align
text-left	left
text-center	center
text-right	right
text-justify	justify