CoreUI Angular Logo
Framework:
  • JavaScript / Vanilla JS
  • React.js
  • Vue.js
Getting startedIntroductionSupport CoreUICustomizeSassOptionsCSS VariablesLayoutBreakpointsContainersGridColumnsGuttersFormsOverviewDate PickerPRODate Range PickerPROForm ControlSelectMulti SelectPROChecks & RadiosPassword InputPRORangeRange SliderPRORatingPROStepperPROInput GroupFloating LabelsLayoutTime PickerPROValidationComponentsAccordionAlertAvatarBadgeBreadcrumbButtonButton GroupCalendarPROCalloutCardCarouselClose buttonCollapseDropdownFooterHeaderImageList GroupLoading ButtonPROModalNavNavbarOffcanvasPaginationPlaceholderPopoverProgressSmart PaginationPROSmart TablePROSidebarSpinnerTableTabsNewToastTooltipWidgetsIconsChartsTemplatesNewAdmin & DashboardDownloadInstallationCustomizeContentMigrationv4 → v5v3 → v4Angular version
DownloadHire UsGet CoreUI PRO
On this page

    Options

    Quickly customize CoreUI for Angular with built-in variables to easily toggle global CSS preferences for controlling style and behavior.

    Global options

    Customize CoreUI for Angular with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable's value and recompile with npm run test as needed.

    You can find and customize these variables for key global options in CoreUI @coreui/coreui/scss/_variables.scss file.

    Variable Values Description
    $spacer 1rem (default), or any value > 0 Specifies the default spacer value to programmatically generate our spacer utilities.
    $enable-rounded true (default) or false Enables predefined border-radius styles on various components.
    $enable-shadows true or false (default) Enables predefined decorative box-shadow styles on various components. Does not affect box-shadows used for focus states.
    $enable-gradients true or false (default) Enables predefined gradients via background-image styles on various components.
    $enable-transitions true (default) or false Enables predefined transitions on various components.
    $enable-reduced-motion true (default) or false Enables the prefers-reduced-motion media query, which suppresses certain animations/transitions based on the users' browser/operating system preferences.
    $enable-grid-classes true (default) or false Enables the generation of CSS classes for the grid system (e.g. .row, .col-md-1, etc.).
    $enable-container-classes true (default) or false Enables the generation of CSS classes for layout containers. (New in v4.2.0)
    $enable-caret true (default) or false Enables pseudo element caret on .dropdown-toggle.
    $enable-button-pointers true (default) or false Add "hand" cursor to non-disabled button elements.
    $enable-rfs true (default) or false Globally enables RFS.
    $enable-validation-icons true (default) or false Enables background-image icons within textual inputs and some custom forms for validation states.
    $enable-negative-margins true or false (default) Enables the generation of negative margin utilities.
    $enable-deprecation-messages true (default) or false Set to false to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in v6.
    $enable-important-utilities true (default) or false Enables the !important suffix in utility classes.
    $enable-smooth-scroll true (default) or false Applies scroll-behavior: smooth globally, except for users asking for reduced motion through prefers-reduced-motion media query
    $enable-ltr false or false (default) Enables Left-to-Right
    $enable-rtl true (default) or false Enables Right-to-Left
    • GitHub
    • Twitter
    • Support
    • CoreUI (Vanilla)
    • CoreUI for React.js
    • CoreUI for Vue.js

    CoreUI for Angular is Open Source UI Components Library for Angular.

    Currently v5.5.2 Code licensed MIT , docs CC BY 3.0 .
    CoreUI PRO requires a commercial license.