Custom Shadcn Bootstrap Theme

This repository provides a custom CSS stylesheet that integrates Shadcn's design system with Bootstrap components, optimized for light and dark themes. The theme enhances the visual consistency across Bootstrap components by applying Shadcn's colors and design principles.

Features

• Custom styles for Bootstrap components, including:
  • Cards
  • Buttons
  • Forms
  • Alerts
  • Modals
• Support for both light and dark themes.
• Responsive design principles built-in.
• Simple, easy-to-use class naming conventions.

Themes Preview

Light Theme	Dark Theme

Installation

To integrate the custom Shadcn Bootstrap theme into your project, follow these steps:

1. Clone the Repository

git clone https://github.com/samueleruggeri/custom-shadcn-bootstrap-theme.git

2. Include the CSS in Your HTML

<link rel="stylesheet" href="path/to/custom-shadcn-bootstrap.css">

Replace "path/to/custom-shadcn-bootstrap.css" with the actual path to the downloaded CSS file.

3. Add Bootstrap

If you haven’t already added Bootstrap to your project, include it in your HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.0/css/bootstrap.min.css">

Usage

Apply the provided custom classes in your HTML markup, as you would with regular Bootstrap classes.

For example:

<button class="btn btn-primary">Click Me</button>

This will render the button with Shadcn's customized styles.

Contributing

Contributions are welcome! If you have suggestions for improvements or new features, feel free to:

1. Open an issue to discuss changes.
2. Submit a pull request with your updates.