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:
Changelog:
07/02/2025
- Code block and minor fixes
04/17/2025
- Added more components.
The post Bootstrap 5 Theme with shadcn/ui Aesthetics – Shadstrap appeared first on CSS Script.