Shards is a free Bootstrap 4 UI kit from Design Revision that supplies ready-made components, two sample landing pages, and original Sketch and SCSS files for building responsive websites.
What is Shards?
Shards is a free Bootstrap 4 UI kit for assembling responsive website templates without writing CSS from scratch. It provides a collection of pre-styled components — form controls, cards, buttons, modals, alerts, tooltips, sliders, datepickers, progress bars, badges, and navbars — that you can copy directly into your HTML markup. The download includes 3 HTML files, 12 CSS files, 4 JavaScript files, 1 Sketch file, and demo images, plus documentation. It is created by Design Revision and distributed by ThemeWagon.
Key Features
- Bootstrap 4 framework — Built on Bootstrap 4, so layouts are responsive by default and adapt to any screen size.
- Two free landing pages — Includes two ready-to-use landing page HTML files built with the kit, letting you deploy a site immediately.
- 8 color selections — Eight enhanced colors optimized from Bootstrap to speed up design decisions.
- Poppins & Roboto typography — Headings use Poppins, body content uses Roboto, with a defined standard for heading and paragraph sizes.
- Form controls — Offers simple forms, icon-based forms, checkboxes, radio buttons, toggles, custom dropdowns, custom file input, and form validation styles.
- Buttons and cards — Multi-size and multi-color buttons, two modifier shapes (pill and squared), and polished Bootstrap 4 cards.
- Sliders and datepickers — Customizable sliders and datepickers that can be applied with minimal changes.
- Tooltips, popovers, modals, progress bars, badges — Ready-made interactive components enabled with JavaScript.
- Icon packs — Combines Material and FontAwesome icons, giving you thousands of icons.
- Source files — Original Sketch and SCSS files are included, along with well-commented elements.
Who should use Shards?
- Front-end developers — Build Bootstrap 4 websites faster by copying the pre-styled components into their projects.
- UI/UX designers — Use the included Sketch file to create page mockups that match the final Bootstrap 4 implementation.
- Beginners and students — Learn Bootstrap 4 component classes and SCSS structure through the well-commented source files.
- Startups and freelancers — Launch landing pages quickly using the two pre-built pages included in the kit.
What can you do with Shards?
- Web designers: Assemble a complete landing page by selecting and placing the ready-made components such as navbars, cards, and forms in your layout.
- Product teams: Prototype a responsive interface that closely matches the final product, thanks to the high-fidelity components.
- Agency developers: Deliver client websites on Bootstrap 4 efficiently, with the option to customize the SCSS variables for brand colors.
- Educators: Teach responsive design and Bootstrap 4 by dissecting the kit's documented component code.
How does Shards work?
Shards works like a component library: download the zip, open the HTML/CSS/JS files, and copy the ready-made markup into your own layout. The included documentation and well-commented elements guide placement and customization.
Pricing
Shards is free to download, open source, and can be used in commercial projects. ThemeWagon includes lifetime free updates.
Alternatives
- Wrapkit — another free Bootstrap 4 UI kit listed on ThemeWagon.
- Now UI Kit — a high-quality free Bootstrap 4 UI kit also distributed by ThemeWagon.
FAQ
Is Shards free?
Yes, Shards is free to download and open source. You can use it in commercial projects and receive lifetime free updates.
What files come with Shards?
The download includes 3 HTML files, 12 CSS files, 4 JavaScript files, 1 Sketch file, and demo images, plus documentation.
What fonts does Shards use?
Headings use Poppins and body text uses Roboto, with the size scale defined by the kit.
Is Shards responsive?
Yes, Shards is built on Bootstrap 4, so all layouts are responsive and adapt to any screen size automatically.
Who created Shards?
Shards was created by Design Revision and is distributed on ThemeWagon.
