Skip to content

eugabrielsilva/shadstrap

Repository files navigation

Shadstrap

Version Size Bootstrap FontAwesome

Shadstrap is a CSS theme inspired by the look of shadcn/ui, combined with the utility classes from Bootstrap and icons from FontAwesome. Designed for easy use with plain HTML.

Components

Check out the demo: https://eugabrielsilva.github.io/shadstrap

Available Bootstrap Classes

  • Full grid system (rows, columns, responsive layout, containers, flex, etc.)
  • Utility classes (margin, padding, text, display, positioning, etc.)

Icons

Includes all icons from the FontAwesome 7 Free pack.

Installation

GitHub CDN

Add this inside the <head> tag:

<link
  rel="stylesheet"
  href="https://eugabrielsilva.github.io/shadstrap/dist/shadstrap.min.css"
/>

Add this before the closing </body> tag:

<script src="https://eugabrielsilva.github.io/shadstrap/dist/shadstrap.min.js"></script>

NPM

In your project folder, run:

npm install shadstrap

Add this inside the <head> tag:

<link rel="stylesheet" href="./node_modules/shadstrap/dist/shadstrap.min.css" />

Add this before the closing </body> tag:

<script src="./node_modules/shadstrap/dist/shadstrap.min.js"></script>

Manually

Download the latest release files to your project folder.

Add this inside the <head> tag:

<link rel="stylesheet" href="/path/to/dist/shadstrap.min.css" />

Add this before the closing </body> tag:

<script src="/path/to/dist/shadstrap.min.js"></script>

About

A CSS theme based on shadcn/ui look, with the benefits of Bootstrap utilities and FontAwesome icons.

Resources

License

Stars

Watchers

Forks