# creativetimofficial/argon-design-system

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/creativetimofficial-argon-design-system).**

2,475 stars · 496 forks · CSS · NOASSERTION

## Links

- GitHub: https://github.com/creativetimofficial/argon-design-system
- Homepage: https://www.creative-tim.com/product/argon-design-system
- awesome-repositories: https://awesome-repositories.com/repository/creativetimofficial-argon-design-system.md

## Topics

`bootstrap-4` `creative-tim` `creativetim` `design` `design-system` `design-systems` `free` `freebie` `freebies` `profile-page` `responsive` `responsive-design` `webdesign`

## Description

Argon Design System is a frontend template collection and UI component library built on Bootstrap 4 for rapid web application development and prototyping. It structures user interface elements into self-contained, reusable blocks that combine with pre-built page templates and stylesheet variable customization.

The framework includes pre-styled views for credential authentication, password recovery, user registration, and profile creation layouts. It supports external identity provider integration and user session persistence alongside interactive JavaScript behaviors such as tooltips, modals, and carousels.

The comprehensive interface element library provides buttons, form inputs, navigation tabs, status alerts, badges, progress indicators, and vector icon integration. Global visual styles, colors, and typography are configured through overridable configuration variables compiled directly into standard cascading style sheets.

## Tags

### User Interface & Experience

- [Web Page Layout Templates](https://awesome-repositories.com/f/user-interface-experience/landing-page-templates/presentation-landing-pages/pre-built-landing-page-assemblers/web-page-layout-templates.md) — Establishes foundational structures for common web views and application sections using ready-to-use example layouts. ([source](https://github.com/creativetimofficial/argon-design-system/blob/master/README.md))
- [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — Delivers a reusable library of interface elements including buttons, form inputs, and navigation tabs.
- [SCSS Variable Overrides](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/scss-variable-overrides.md) — Customizes global visual styles and color schemes through overridable SCSS variables compiled to CSS.
- [Generic Button Components](https://awesome-repositories.com/f/user-interface-experience/generic-button-components.md) — Renders clickable buttons in multiple colors, shapes, sizes, and states to trigger user actions. ([source](https://demos.creative-tim.com/argon-design-system))
- [Modular Component Construction](https://awesome-repositories.com/f/user-interface-experience/modular-component-construction.md) — Structures user interface elements into interchangeable modular blocks to construct complex application views.
- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Offers a comprehensive collection of prebuilt interface elements that combine easily and customize. ([source](https://github.com/creativetimofficial/argon-design-system/blob/master/README.md))
- [Form Input Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components.md) — Displays text controls, checkboxes, radios, toggles, and sliders for collecting user data and preferences safely. ([source](https://demos.creative-tim.com/argon-design-system))
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Modifies the visual appearance and color schemes of interface elements through configuration files to match brand requirements. ([source](https://github.com/creativetimofficial/argon-design-system#readme))
- [Authentication User Interfaces](https://awesome-repositories.com/f/user-interface-experience/authentication-user-interfaces.md) — Creates login, registration, and password recovery views with integrated form controls and alert feedback.
- [Application Page Templates](https://awesome-repositories.com/f/user-interface-experience/dashboard-layout-templates/application-page-templates.md) — Establishes foundational page structures using fully assembled template layouts for rapid development.
- [Event-Driven Plugin Hooks](https://awesome-repositories.com/f/user-interface-experience/extensible-interfaces/plugin-renderers/event-driven-plugin-hooks.md) — Enhances static markup with interactive JavaScript behaviors like tooltips, modals, and carousels.
- [Landing Page Templates](https://awesome-repositories.com/f/user-interface-experience/landing-page-templates.md) — Provides a set of pre-built landing, profile, and authentication pages designed to jumpstart web projects.
- [Popover Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays.md) — Displays rich interactive pop-up content positioned precisely around target elements in multiple directional options. ([source](https://demos.creative-tim.com/argon-design-system))
- [Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators.md) — Shows visual completion bars to communicate task status, upload progress, and loading metrics to users clearly. ([source](https://demos.creative-tim.com/argon-design-system))
- [Bootstrap Theme Collections](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/theme-style-customizations/bootstrap-theme-collections.md) — Offers a collection of pre-styled components and template pages built on Bootstrap for rapid prototyping.
- [Navigation Tabs](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/navigation-tabs.md) — Switches between multiple content panels using icon or text navigation to structure complex page layouts cleanly. ([source](https://demos.creative-tim.com/argon-design-system))
- [Tooltip Components](https://awesome-repositories.com/f/user-interface-experience/tooltip-components.md) — Displays supplementary text on hover or focus at specific directional positions around any interactive interface element. ([source](https://demos.creative-tim.com/argon-design-system))
- [Statistics Displays](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries/statistics-displays.md) — Displays user engagement metrics such as connection counts, photo totals, and comment totals to summarize activity levels. ([source](https://demos.creative-tim.com/argon-design-system/examples/profile.html))
- [User Profile Components](https://awesome-repositories.com/f/user-interface-experience/user-profile-components.md) — Presents personal user details including name, location, and professional title within a structured profile card. ([source](https://demos.creative-tim.com/argon-design-system/examples/profile.html))
- [Vector Icons](https://awesome-repositories.com/f/user-interface-experience/vector-icons.md) — Integrates scalable symbol libraries to enhance visual communication and navigation clarity across the interface design. ([source](https://demos.creative-tim.com/argon-design-system))

### Web Development

- [Bootstrap Development](https://awesome-repositories.com/f/web-development/bootstrap-development.md) — Builds web applications and pages using pre-styled Bootstrap 4 components to speed up interface creation.

### Part of an Awesome List

- [Component Styling](https://awesome-repositories.com/f/awesome-lists/devtools/ui-styling-and-themes/component-styling.md) — Shows pictures in various shapes, frames, and grouped layouts including circular avatars and square thumbnails. ([source](https://demos.creative-tim.com/argon-design-system))

### Security & Cryptography

- [Credential Authentications](https://awesome-repositories.com/f/security-cryptography/user-authentication-systems/credential-authentications.md) — Verifies username and password credentials against backend systems to grant secure access. ([source](https://demos.creative-tim.com/argon-design-system/examples/login.html))