Complete Class Reference
Comprehensive documentation of all available CSS classes in Solanke Themes
Installation
<!-- CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/solanke-themes@latest/solanke-themes.css">
<!-- NPM -->
npm install solanke-themes
Basic Usage
<html data-color-theme="luxury">
<body data-theme-enabled>
<!-- Your content -->
</body>
</html>
Themes
Three professional themes available
🌿 Luxury Green
Natural, elegant design
data-color-theme="luxury"
💼 Corporate Blue
Professional, business-ready
data-color-theme="corporate"
🖤 Shadcn Dark
Minimal black & white
data-color-theme="shadcn"
Dark Mode
<html data-color-theme="luxury" class="dark">
Background Colors
.bg-theme-darkest
Darkest background color
Example
.bg-theme-dark
Dark background color
Example
.bg-theme-sage
Sage/medium background
Example
.bg-theme-mint
Mint/light background
Example
.bg-theme-cream
Cream/lightest background
Example
.bg-theme-accent
Accent color background
Example
Background with Opacity
.bg-theme-darkest-80
80% opacity
.bg-theme-darkest-60
60% opacity
.bg-theme-darkest-40
40% opacity
.bg-theme-darkest-20
20% opacity
.bg-theme-sage-60/40/20/10
Sage with opacity
.bg-theme-mint-60/40/20/10
Mint with opacity
Text Colors
.text-theme-darkest
Darkest text color
Example Text
.text-theme-dark
Dark text color
Example Text
.text-theme-sage
Sage text color
Example Text
.text-theme-mint
Mint text color
Example Text
.text-theme-cream
Cream text color
Example Text
.text-theme-accent
Accent text color
Example Text
Gradients
.gradient-theme-primary
Primary gradient (darkest → sage → mint)
Example Gradient
.gradient-theme-secondary
Secondary gradient (sage → mint)
Example Gradient
.gradient-theme-accent
Accent gradient
Example Gradient
.gradient-theme-vertical
Vertical gradient
Example Gradient
.text-gradient-theme
Gradient text effect
Gradient Text
Cards
.card / .card-theme
Base card component
Card Title
Card content goes here
.card-header
Card header section
.card-body
Card body section
.card-footer
Card footer section
.card-title
Card title styling
.card-subtitle
Card subtitle styling
.card-text
Card text styling
.card-outline
Outlined card variant
.card-solid
Solid card variant
.card-horizontal
Horizontal card layout
.card-group
Card group container
.card-columns
Masonry card layout
Badges
.badge-theme-primary
Primary Badge
.badge-theme-secondary
Secondary Badge
.badge-theme-accent
Accent Badge
Alerts
.alert-theme-info
This is an info alert
.alert-theme-success
This is a success alert
.alert-theme-warning
This is a warning alert
.alert-theme-danger
This is a danger alert
Form Elements
.input-theme
Themed input field
.textarea-theme
Themed textarea
.select-theme
Themed select dropdown
.checkbox-theme
Themed checkbox
.radio-theme
Themed radio button
.label-theme
Themed form label
List Groups
.list-group
List group container
.list-group-item
List group item
.list-group-item-action
Interactive list item
.list-group-item.active
Active list item
.list-group-horizontal
Horizontal list layout
.list-group-flush
Flush list (no borders)
Accordion
.accordion
Accordion container
.accordion-item
Accordion item
.accordion-header
Accordion header/button
.accordion-body
Accordion content body
.accordion-item.active
Expanded accordion item
Pagination
.pagination
Pagination container
.page-item
Page item wrapper
.page-link
Page link button
.page-item.active
Active page
Dropdowns
.dropdown
Dropdown container
.dropdown-toggle
Dropdown trigger button
.dropdown-menu
Dropdown menu container
.dropdown-item
Dropdown menu item
.dropdown-divider
Dropdown separator
.dropdown-menu.show
Visible dropdown state
Toast Notifications
.toast
Toast notification
.toast-header
Toast header
.toast-body
Toast body content
.toast.show
Visible toast
Modal
.modal-overlay
Modal backdrop
.modal-content
Modal content container
.modal-header
Modal header
.modal-body
Modal body content
.modal-footer
Modal footer
Offcanvas
.offcanvas
Offcanvas sidebar panel
.offcanvas-header
Offcanvas header
.offcanvas-body
Offcanvas body content
.offcanvas.show
Visible offcanvas
Containers
.container
Max-width 1200px
.container-sm
Max-width 640px
.container-md
Max-width 768px
.container-lg
Max-width 1024px
.container-xl
Max-width 1400px
.container-full
Width 100%
.section
Padding 6rem vertical
.section-sm
Padding 4rem vertical
.section-lg
Padding 8rem vertical
Grid System
.grid-2
2 column grid (responsive)
1
2
.grid-3
3 column grid (responsive)
.grid-4
4 column grid (responsive)
.grid-auto-fit
Auto-fit grid (min 200px)
.grid-auto-fit-sm
Auto-fit (min 150px)
.grid-auto-fit-md
Auto-fit (min 250px)
.grid-auto-fit-lg
Auto-fit (min 300px)
.gap-{0-20}
Grid/flex gap (0.25rem increments)
Flexbox Utilities
Display & Direction
.flex
.flex-row
.flex-col
.flex-wrap
.flex-nowrap
.inline-flex
Justify Content
.justify-start
.justify-end
.justify-center
.justify-between
.justify-around
.justify-evenly
Align Items
.items-start
.items-end
.items-center
.items-baseline
.items-stretch
Spacing Utilities
Margin Classes
.m-{0-20}
All sides
.mx-{0-20}
Horizontal
.my-{0-20}
Vertical
.mt-{0-20}
Top
.mr-{0-20}
Right
.mb-{0-20}
Bottom
.ml-{0-20}
Left
.mx-auto
Center block
Padding Classes
.p-{0-20}
All sides
.px-{0-20}
Horizontal
.py-{0-20}
Vertical
.pt-{0-20}
Top
.pr-{0-20}
Right
.pb-{0-20}
Bottom
.pl-{0-20}
Left
Note: Numbers represent 0.25rem increments (e.g., .m-4 = 1rem)
Sizing Utilities
Width
.w-full
100%
.w-auto
Auto
.w-screen
100vw
.w-{10-100}
10-100% (10 steps)
.w-15
60px (3.75rem)
.w-20
80px (5rem)
.w-25
100px (6.25rem)
.w-30
120px (7.5rem)
Height
.h-full
100%
.h-screen
100vh
.h-auto
Auto
.min-h-screen
Min-height 100vh
.h-15
60px
.h-20
80px
.h-25
100px
.h-30
120px
Max Width
.max-w-xs
320px
.max-w-sm
384px
.max-w-md
448px
.max-w-lg
512px
.max-w-xl
576px
.max-w-2xl
672px
.max-w-3xl
768px
.max-w-4xl
896px
.max-w-5xl
1024px
.max-w-6xl
1152px
.max-w-7xl
1280px
.max-w-full
100%
Font Sizes
.text-xs
0.75rem (12px)
Example Text
.text-sm
0.875rem (14px)
Example Text
.text-base
1rem (16px)
Example Text
.text-lg
1.125rem (18px)
Example Text
.text-xl
1.25rem (20px)
Example Text
.text-2xl
1.5rem (24px)
Example Text
.text-3xl
1.875rem (30px)
Example Text
.text-4xl
2.25rem (36px)
Example Text
Font Weights
.font-light
Light Text
.font-normal
Normal Text
.font-medium
Medium Text
.font-semibold
Semibold Text
.font-bold
Bold Text
.font-black
Black Text
Text Alignment
.text-left
.text-center
.text-right
.text-justify
Text Transform
.uppercase
.lowercase
.capitalize
.normal-case
Shadows
.shadow-theme-sm
Small Shadow
.shadow-theme-md
Medium Shadow
.shadow-theme-lg
Large Shadow
.shadow-theme-xl
XL Shadow
Animations
.animate-fade-in
Fade In
.animate-pulse
Pulse
.animate-float
Float
.animate-spin
⚙️
.animate-bounce
Bounce
.animate-scale-up
Scale Up
Animation Delays
.delay-100
.delay-200
.delay-300
.delay-400
.delay-500
Hover Effects
.hover-lift
Lifts element on hover
Hover Me
.hover-scale
Scales element on hover
Hover Me
.hover-brightness
Brightens on hover
Hover Me
Glass Morphism
.glass-theme
Glass morphism effect
Glass Card
Beautiful frosted glass effect
Opacity
.opacity-0
.opacity-10
.opacity-20
.opacity-30
.opacity-40
.opacity-50
.opacity-60
.opacity-70
.opacity-80
.opacity-90
.opacity-100
Transitions
.transition-all
.transition-colors
.transition-opacity
.transition-transform
Display
.block
.inline-block
.inline
.flex
.inline-flex
.grid
.hidden
.none
Position
.static
.relative
.absolute
.fixed
.sticky
Position Values
.top-0
.right-0
.bottom-0
.left-0
.top-1-2
50%
.inset-0
Overflow
.overflow-auto
.overflow-hidden
.overflow-visible
.overflow-scroll
.overflow-x-auto
.overflow-y-auto
Cursor
.cursor-pointer
Hover me
.cursor-default
.cursor-not-allowed
Disabled
Border Radius
.rounded-none
None
.rounded
Small
.rounded-lg
Large
.rounded-xl
XL
.rounded-2xl
2XL
.rounded-3xl
3XL
.rounded-full
Full
Border Classes
.border
1px
.border-2
2px
.border-4
4px
.border-theme-sage
.border-theme-mint
Loading States
Spinners
.spinner-sm
.spinner
.spinner-lg
Progress Bar
.progress-bar
Skeleton Loaders
.skeleton
That's Everything! 🎉
You now have access to all classes in Solanke Themes