Argon Design System Angular

Argon Design System Angular is a free, open-source Angular and Bootstrap design system by Creative Tim that provides over 100 pre-coded UI components and complete example pages for building web interfaces.

What is Argon Design System Angular?

Argon Design System Angular is a front-end UI kit created by Creative Tim, distributed under the MIT license with the version 1.3.0 visible in its badges. Built on Angular CLI and the Bootstrap framework, it takes Angular components and SASS styling as inputs and outputs a full set of styled elements — buttons, inputs, navbars, alerts, modals, tabs, typography, and more — alongside complete page templates. The download includes the source project with files such as src/app components for home, landing, login, profile, signup, and a sections module.

Key Features

• Over 100 components — Includes buttons, inputs, navbars, alerts, modals, tabs, and typography sections, each with color, hover, and focus states that can be modified through SASS files.
• Pre-built example pages — Ready-to-use login, landing, profile, register, and home pages are included under src/app, letting you start from a working page instead of a blank canvas.
• SASS theming — Colors and styles live in src/assets/scss/custom and can be adjusted by editing SASS variables, with support for the Bootstrap files under src/assets/scss/bootstrap.
• Component documentation — The project links to a hosted documentation site covering the tutorial, component examples, and foundation colors at demos.creative-tim.com.
• Standard Angular structure — Organized as a typical Angular CLI project with angular.json, tsconfig.json, package.json, and modular components under src/app, including a separate sections module for reusable component examples.
• Modular section components — The template ships with standalone Angular components for alerts, buttons, inputs, navigation, tabs, typography, and versions, making it easy to pick only what you need.
• One-click deployment — A deploy button is provided for Genezio, which lets you launch your own copy of the template directly from the GitHub repository.
• Wide browser support — Officially supports the last two versions of Chrome, Firefox, Edge, Safari, and Opera.

Who is it for?

• Angular developers who need a starting point for a web app UI without building every button, form, and navbar from scratch.
• Front-end designers who want a Bootstrap-based design system and plan to customize colors through SASS variables.
• Product teams and startups that need quick, presentable landing pages or authentication flows with the included login and register pages.
• Creative Tim users looking for a free Angular theme to base client projects on, with the option to deploy to Genezio in one click.

What can you do with Argon Design System Angular?

• Launch a landing page: Use the included landing component to create a marketing page with a hero area, navbar, and footer without additional page design.
• Build an authentication UI: Combine the login and register pages plus the alert and input components to assemble sign-up and sign-in flows.
• Prototype a user dashboard: Start with the profile page and add cards, buttons, and modal components to mock up account and settings screens.
• Showcase component styles: Use the sections module to demonstrate buttons, tabs, inputs, and typography choices to clients or teammates.

How do I get started with Argon Design System Angular?

Download the zip from GitHub or Creative Tim, or clone the repository at https://github.com/creativetimofficial/argon-design-system-angular.git. After that, run the project with the Angular CLI commands defined in package.json; the template also offers a one-click deploy option to Genezio for hosting a live version.

What is the file structure?

The repository contains a standard Angular CLI workspace: src/app holds feature components (home, landing, login, profile, signup) and a sections folder with component examples, while src/assets stores CSS, images, JavaScript, SCSS, and vendor files. Root-level files include angular.json, package.json, tsconfig.json, and tslint.json.

Is Argon Design System Angular free?

Yes, this template is free and open source under the MIT license, as listed in the README's licensing section. No paid tier or pricing is mentioned on the page, and the repository is publicly available on GitHub.