CSS
Learn how to use specific Dracula UI CSS Classes.
CSS Classes Index
Dracula UI ships with abstracted Components and Patterns that can be used for some of the most common web experiences out of the box.
However, we understand that some engineers might want use specific CSS classes in order to customize their websites. The following table contains an index with all Dracula UI CSS classes.
Feel free to mix and match whatever styling strategy makes sense for your project.
| .drac-avatar |
| .drac-avatar-background |
| .drac-avatar-lg-stroke |
| .drac-avatar-no-border |
| .drac-avatar-subtle |
| .drac-badge |
| .drac-badge-outline |
| .drac-badge-subtle |
| .drac-bg-animated |
| .drac-bg-black |
| .drac-bg-black-secondary |
| .drac-bg-black-transparent |
| .drac-bg-cyan |
| .drac-bg-cyan-green |
| .drac-bg-cyan-green-transparent |
| .drac-bg-cyan-secondary |
| .drac-bg-cyan-transparent |
| .drac-bg-green |
| .drac-bg-green-secondary |
| .drac-bg-green-transparent |
| .drac-bg-grey |
| .drac-bg-grey-secondary |
| .drac-bg-grey-transparent |
| .drac-bg-orange |
| .drac-bg-orange-secondary |
| .drac-bg-orange-transparent |
| .drac-bg-pink |
| .drac-bg-pink-purple |
| .drac-bg-pink-purple-transparent |
| .drac-bg-pink-secondary |
| .drac-bg-pink-transparent |
| .drac-bg-purple |
| .drac-bg-purple-cyan |
| .drac-bg-purple-cyan-transparent |
| .drac-bg-purple-secondary |
| .drac-bg-purple-transparent |
| .drac-bg-red |
| .drac-bg-red-secondary |
| .drac-bg-red-transparent |
| .drac-bg-white |
| .drac-bg-white-secondary |
| .drac-bg-white-transparent |
| .drac-bg-yellow |
| .drac-bg-yellow-pink |
| .drac-bg-yellow-pink-transparent |
| .drac-bg-yellow-secondary |
| .drac-bg-yellow-transparent |
| .drac-border-black |
| .drac-border-cyan |
| .drac-border-green |
| .drac-border-grey |
| .drac-border-orange |
| .drac-border-pink |
| .drac-border-purple |
| .drac-border-red |
| .drac-border-white |
| .drac-border-yellow |
| .drac-btn |
| .drac-btn-ghost |
| .drac-btn-lg |
| .drac-btn-outline |
| .drac-btn-sm |
| .drac-btn-xs |
| .drac-card |
| .drac-card-subtle |
| .drac-checkbox |
| .drac-checkbox-black |
| .drac-checkbox-cyan |
| .drac-checkbox-green |
| .drac-checkbox-orange |
| .drac-checkbox-pink |
| .drac-checkbox-purple |
| .drac-checkbox-red |
| .drac-checkbox-white |
| .drac-checkbox-yellow |
| .drac-d-block |
| .drac-d-flex |
| .drac-d-grid |
| .drac-d-inline |
| .drac-d-inline-block |
| .drac-d-inline-flex |
| .drac-d-inline-grid |
| .drac-d-inline-table |
| .drac-d-none |
| .drac-d-table |
| .drac-glow-black |
| .drac-glow-cyan |
| .drac-glow-green |
| .drac-glow-grey |
| .drac-glow-orange |
| .drac-glow-pink |
| .drac-glow-purple |
| .drac-glow-red |
| .drac-glow-white |
| .drac-glow-yellow |
| .drac-h-2xl |
| .drac-h-3xl |
| .drac-h-4xl |
| .drac-h-5xl |
| .drac-h-6xl |
| .drac-h-7xl |
| .drac-h-8xl |
| .drac-h-auto |
| .drac-h-full |
| .drac-h-lg |
| .drac-h-md |
| .drac-h-none |
| .drac-h-sm |
| .drac-h-xl |
| .drac-h-xs |
| .drac-h-xxs |
| .drac-heading |
| .drac-heading-2xl |
| .drac-heading-lg |
| .drac-heading-sm |
| .drac-heading-xl |
| .drac-heading-xs |
| .drac-input |
| .drac-input-black |
| .drac-input-blackSecondary |
| .drac-input-border-lg |
| .drac-input-border-md |
| .drac-input-border-sm |
| .drac-input-cyan |
| .drac-input-green |
| .drac-input-lg |
| .drac-input-orange |
| .drac-input-outline |
| .drac-input-pink |
| .drac-input-purple |
| .drac-input-red |
| .drac-input-sm |
| .drac-input-white |
| .drac-input-yellow |
| .drac-line-height |
| .drac-line-height-2xl |
| .drac-line-height-lg |
| .drac-line-height-sm |
| .drac-line-height-xl |
| .drac-line-height-xs |
| .drac-list |
| .drac-list-black |
| .drac-list-blackSecondary |
| .drac-list-cyan |
| .drac-list-green |
| .drac-list-none |
| .drac-list-orange |
| .drac-list-ordered |
| .drac-list-pink |
| .drac-list-purple |
| .drac-list-red |
| .drac-list-unordered |
| .drac-list-white |
| .drac-list-yellow |
| .drac-m-auto |
| .drac-m-lg |
| .drac-m-md |
| .drac-m-none |
| .drac-m-sm |
| .drac-m-xs |
| .drac-m-xxs |
| .drac-mb-auto |
| .drac-mb-lg |
| .drac-mb-md |
| .drac-mb-none |
| .drac-mb-sm |
| .drac-mb-xs |
| .drac-mb-xxs |
| .drac-ml-auto |
| .drac-ml-lg |
| .drac-ml-md |
| .drac-ml-none |
| .drac-ml-sm |
| .drac-ml-xs |
| .drac-ml-xxs |
| .drac-mr-auto |
| .drac-mr-lg |
| .drac-mr-md |
| .drac-mr-none |
| .drac-mr-sm |
| .drac-mr-xs |
| .drac-mr-xxs |
| .drac-mt-auto |
| .drac-mt-lg |
| .drac-mt-md |
| .drac-mt-none |
| .drac-mt-sm |
| .drac-mt-xs |
| .drac-mt-xxs |
| .drac-mx-auto |
| .drac-mx-lg |
| .drac-mx-md |
| .drac-mx-none |
| .drac-mx-sm |
| .drac-mx-xs |
| .drac-mx-xxs |
| .drac-my-auto |
| .drac-my-lg |
| .drac-my-md |
| .drac-my-none |
| .drac-my-sm |
| .drac-my-xs |
| .drac-my-xxs |
| .drac-p-lg |
| .drac-p-md |
| .drac-p-none |
| .drac-p-sm |
| .drac-p-xs |
| .drac-p-xxs |
| .drac-pb-lg |
| .drac-pb-md |
| .drac-pb-none |
| .drac-pb-sm |
| .drac-pb-xs |
| .drac-pb-xxs |
| .drac-pl-lg |
| .drac-pl-md |
| .drac-pl-none |
| .drac-pl-sm |
| .drac-pl-xs |
| .drac-pl-xxs |
| .drac-pr-lg |
| .drac-pr-md |
| .drac-pr-none |
| .drac-pr-sm |
| .drac-pr-xs |
| .drac-pr-xxs |
| .drac-pt-lg |
| .drac-pt-md |
| .drac-pt-none |
| .drac-pt-sm |
| .drac-pt-xs |
| .drac-pt-xxs |
| .drac-px-lg |
| .drac-px-md |
| .drac-px-none |
| .drac-px-sm |
| .drac-px-xs |
| .drac-px-xxs |
| .drac-py-lg |
| .drac-py-md |
| .drac-py-none |
| .drac-py-sm |
| .drac-py-xs |
| .drac-py-xxs |
| .drac-radio |
| .drac-radio-black |
| .drac-radio-cyan |
| .drac-radio-green |
| .drac-radio-orange |
| .drac-radio-pink |
| .drac-radio-purple |
| .drac-radio-red |
| .drac-radio-white |
| .drac-radio-yellow |
| .drac-rounded |
| .drac-rounded-2xl |
| .drac-rounded-3xl |
| .drac-rounded-full |
| .drac-rounded-lg |
| .drac-rounded-md |
| .drac-rounded-none |
| .drac-rounded-sm |
| .drac-rounded-xl |
| .drac-scrollbar-cyan |
| .drac-scrollbar-green |
| .drac-scrollbar-grey |
| .drac-scrollbar-orange |
| .drac-scrollbar-pink |
| .drac-scrollbar-purple |
| .drac-scrollbar-red |
| .drac-scrollbar-yellow |
| .drac-select |
| .drac-select-arrow |
| .drac-select-black |
| .drac-select-cyan |
| .drac-select-green |
| .drac-select-lg |
| .drac-select-orange |
| .drac-select-outline |
| .drac-select-pink |
| .drac-select-purple |
| .drac-select-red |
| .drac-select-sm |
| .drac-select-white |
| .drac-select-yellow |
| .drac-switch |
| .drac-switch-black |
| .drac-switch-cyan |
| .drac-switch-green |
| .drac-switch-orange |
| .drac-switch-pink |
| .drac-switch-purple |
| .drac-switch-red |
| .drac-switch-white |
| .drac-switch-yellow |
| .drac-tab |
| .drac-tab-active |
| .drac-tab-link |
| .drac-table |
| .drac-table-black |
| .drac-table-cyan |
| .drac-table-green |
| .drac-table-orange |
| .drac-table-pink |
| .drac-table-purple |
| .drac-table-red |
| .drac-table-striped |
| .drac-table-white |
| .drac-table-yellow |
| .drac-tabs |
| .drac-tabs-black |
| .drac-tabs-cyan |
| .drac-tabs-green |
| .drac-tabs-orange |
| .drac-tabs-pink |
| .drac-tabs-purple |
| .drac-tabs-red |
| .drac-tabs-white |
| .drac-tabs-yellow |
| .drac-text |
| .drac-text-black |
| .drac-text-black-secondary |
| .drac-text-black-secondary--hover |
| .drac-text-black--hover |
| .drac-text-bold |
| .drac-text-center |
| .drac-text-cyan |
| .drac-text-cyan-green |
| .drac-text-cyan-green--hover |
| .drac-text-cyan-secondary |
| .drac-text-cyan-secondary--hover |
| .drac-text-cyan--hover |
| .drac-text-green |
| .drac-text-green-secondary |
| .drac-text-green-secondary--hover |
| .drac-text-green--hover |
| .drac-text-grey |
| .drac-text-grey-secondary |
| .drac-text-justify |
| .drac-text-left |
| .drac-text-lg |
| .drac-text-orange |
| .drac-text-orange-secondary |
| .drac-text-orange-secondary--hover |
| .drac-text-orange--hover |
| .drac-text-pink |
| .drac-text-pink-purple |
| .drac-text-pink-purple--hover |
| .drac-text-pink-secondary |
| .drac-text-pink-secondary--hover |
| .drac-text-pink--hover |
| .drac-text-purple |
| .drac-text-purple-cyan |
| .drac-text-purple-cyan--hover |
| .drac-text-purple-secondary |
| .drac-text-purple-secondary--hover |
| .drac-text-purple--hover |
| .drac-text-red |
| .drac-text-red-secondary |
| .drac-text-red-secondary--hover |
| .drac-text-red--hover |
| .drac-text-right |
| .drac-text-semibold |
| .drac-text-sm |
| .drac-text-white |
| .drac-text-white-secondary |
| .drac-text-white-secondary--hover |
| .drac-text-white--hover |
| .drac-text-xs |
| .drac-text-yellow |
| .drac-text-yellow-pink |
| .drac-text-yellow-pink--hover |
| .drac-text-yellow-secondary |
| .drac-text-yellow-secondary--hover |
| .drac-text-yellow--hover |
| .drac-w-2xl |
| .drac-w-3xl |
| .drac-w-4xl |
| .drac-w-5xl |
| .drac-w-6xl |
| .drac-w-7xl |
| .drac-w-8xl |
| .drac-w-auto |
| .drac-w-full |
| .drac-w-lg |
| .drac-w-md |
| .drac-w-none |
| .drac-w-sm |
| .drac-w-xl |
| .drac-w-xs |
| .drac-w-xxs |