Argon Design System Angular

Argon Design System Angular is a free, open-source UI kit from Creative Tim that pairs Bootstrap 4 with Angular 7 and provides over 100 handcrafted components for building responsive web interfaces.

What is Argon Design System Angular?

Argon Design System Angular is a design system template that combines the Bootstrap 4 CSS framework with Angular 7 components, delivering a complete set of UI building blocks such as buttons, inputs, navbars, menus, tabs, progress bars, and alerts. It is distributed as a free download on ThemeWagon and includes 4 example pages and 5 customized plugins, with full documentation and source files in HTML, CSS/SCSS, JavaScript, and font icons. The template was created by Creative Tim and requires an Angular 7 project to run, producing responsive pages that work across Chrome, Edge, Firefox, Opera, Safari, and mobile browsers.

Key Features

• Bootstrap 4 + Angular 7 — The template is built on the Bootstrap 4 grid and utility system and integrates with Angular 7's component architecture, so each UI element works as an Angular component.
• 100 handcrafted components — Includes buttons, inputs, navbar, dropdown menus, tabbed content, customized forms, progress bars, pagination, alerts, a JavaScript date picker, and a Bootstrap carousel.
• 5 customized plugins — The package bundles five customized plugins, including a JavaScript date picker and a Bootstrap carousel.
• 4 example pages — Pre-built pages are included to demonstrate how the components and layout patterns fit together in a real project.
• Fully responsive and cross-browser — Components adapt to all screen sizes and are compatible with Chrome, Edge, Firefox, Mobile, Opera, and Safari.
• Two icon sets — FontAwesome and Nucleo Icons are bundled so buttons, lists, and navigation can include icons without extra dependencies.
• Open-source license — The template is free to use in commercial projects and includes lifetime free updates.

Who is it for?

• Angular developers — Need a ready-made set of styled components to drop into an Angular 7 application instead of writing custom CSS for every control.
• Front-end designers — Want to customize SCSS source files to match brand colors while keeping a responsive, tested baseline.
• Startup and landing page teams — Can use the 4 example pages and components like sticky navigation, dropdowns, and alerts to assemble a professional landing page quickly.

What can you do with Argon Design System Angular?

• Angular developers: Build a new UI by mixing its buttons, forms, progress bars, carousels, and date picker into an existing Angular 7 project.
• Designers: Modify the included SCSS variables to create a custom theme across all components without changing markup.
• Prototyping: Use the 4 example pages and 5 plugins to create clickable prototypes for stakeholder reviews.

Pricing

Argon Design System Angular is free. It is open source, can be used in commercial projects, and receives lifetime free updates. The download is available from ThemeWagon after providing an email address.

Alternatives

• Argon – Free Bootstrap 4 Design System — the non-Angular version of this kit, also from Creative Tim, built with plain Bootstrap 4.
• Material Kit – A Free Bootstrap 4 UI Kit — a Bootstrap 4 UI kit implementing Google's Material Design look.
• Blk – Free Bootstrap 4 Design System — another Bootstrap 4 design system with a dark, modern visual style.

FAQ

Is Argon Design System Angular free?

Yes, it is free to download and use. The license allows use in commercial projects and includes lifetime free updates. You only need to provide an email address to receive the download link from ThemeWagon.

What Angular version does it use?

The template is built specifically for Angular 7. If you are using a different Angular version, you may need to adapt the component code, as the example pages and plugins target Angular 7.

How many components does it include?

Argon Design System Angular includes 100 handcrafted components, such as buttons, inputs, navbar, tabs, progress bars, pagination, alerts, and a carousel. It also bundles 5 customized plugins.

Can I change the design to match my brand?

Yes. The package includes CSS and SCSS source files, so you can edit variables and styles to customize colors, typography, and spacing across all components.

What browsers are supported?

The template is fully responsive and works in Chrome, Edge, Firefox, Opera, Safari, and mobile browsers.