Bootstrap 5 Theme with shadcn/ui Aesthetics – Shadstrap

Preview:

Description:

Shadstrap is a UI Kit (essentially a Bootstrap theme) that combines the clean, professional aesthetics of shadcn/ui with the extensive utility system of Bootstrap 5.

It allows you to create modern web interfaces using familiar Bootstrap syntax while achieving the distinctive shadcn/ui design language.

Shadstrap works by providing custom CSS and potentially some JavaScript overrides or additions on top of Bootstrap 5.

You get to keep using the familiar Bootstrap grid system, utility classes (margins, padding, flex, etc.), and component structure.

The goal is to write markup like you normally would for Bootstrap, but have it render with the shadcn/ui appearance.

How to use it:

1. Include Shadstrap’s CSS and JavaScript files in your HTML:

<link rel="stylesheet" href="dist/shadstrap.min.css">
<script src="dist/shadstrap.min.js"></script>

2. Use standard Bootstrap 5 classes for layout (containers, rows, columns), utilities (spacing, flex, display), and components (buttons, cards, forms, etc.). Shadstrap’s CSS will style these elements according to the shadcn/ui aesthetic.

3. Available UI Components:

• Typography
• Flex
• Buttons
• Form Controls
• Cards
• Alerts
• Badges
• Breadcrumbs
• Pagination
• Separator
• Tables
• Dialog
• Sheet
• Tabs
• Dropdown
• Skeleton

See Also:

• shadcn/ui Components

Changelog:

07/27/2025

• v0.1.0

07/16/2025

• Tooltip and update js selectors

07/16/2025

• Added slider ranges

07/02/2025

• Code block and minor fixes

04/17/2025

• Added more components.