diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 241cd5c..8f0f5a4 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -219,24 +219,24 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 	}
 
 	if (selectMonth) return (
-		<div className='datenel-component' role="dialog" aria-label="Date selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
-			<div className='header'>
-				<button className='stepper' onClick={() => {
+		<div className='__datenel_datenel-component' role="dialog" aria-label="Date selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
+			<div className='__datenel_header'>
+				<button className='__datenel_stepper' onClick={() => {
 					if (currentYear <= 100) return
 					setCurrentYear(currentYear - 1)
 				}} aria-label={`Go to last year, ${currentYear - 1}, you are now at year ${currentYear}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<input className='indicator'
+				<input className='__datenel_indicator'
 					value={currentYear}
 					onChange={e => changeYear(e.target.value)}
 					onBlur={adjustYear}
 					aria-label="Year input, type a year to go to that year"
 				/>
-				<button className='stepper' onClick={() => {
+				<button className='__datenel_stepper' onClick={() => {
 					setCurrentYear(currentYear + 1)
 				}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='body'>
-				<div className='month-selector-body'>
+			<div className='__datenel_body'>
+				<div className='__datenel_month-selector-body'>
 					{Array.from({ length: 12 }).map((_, index) => {
 						function calculateNotAvailable() {
 							// When the last day of a month not inside the range of available dates
@@ -248,7 +248,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 							return false
 						}
 						return <button
-							className={`item ${calculateNotAvailable() && 'not-available'}`}
+							className={`__datenel_item ${calculateNotAvailable() && '__datenel_not-available'}`}
 							key={index}
 							onClick={() => {
 								setCurrentMonth(index)
@@ -263,26 +263,26 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 					})}
 				</div>
 			</div>
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
+			{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	)
 	else return (
-		<div className='datenel-component' role="dialog" aria-label="Date selection panel" id={`__datenel-${uniqueId}`}>
-			<div className='header'>
-				<button className='stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<button className='indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
+		<div className='__datenel_datenel-component' role="dialog" aria-label="Date selection panel" id={`__datenel-${uniqueId}`}>
+			<div className='__datenel_header'>
+				<button className='__datenel_stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
+				<button className='__datenel_indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
 					{new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
 				</button>
-				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
+				<button className='__datenel_stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='body'>
-				<div className='calendar-view-body grid' aria-live="polite">
-					{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
+			<div className='__datenel_body'>
+				<div className='__datenel_calendar-view-body __datenel_grid' aria-live="polite">
+					{l10nDays.map((day, index) => <div className='__datenel_item __datenel_day-indicator' key={index}>{day}</div>)}
 
 					{dates.map(date => {
 						const notAvailable = (availableRangeStart && date < availableRangeStart) || (availableRangeEnd && date > availableRangeEnd) || currentMonth !== date.getMonth()
 						return <button
-							className={`item date ${notAvailable && 'not-available'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
+							className={`__datenel_item __datenel_date ${notAvailable && '__datenel_not-available'} ${selectedDate.toDateString() === date.toDateString() && '__datenel_active'}`}
 							key={date.toISOString()}
 							onClick={() => selectDate(date)}
 							aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
@@ -291,12 +291,12 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 							disabled={notAvailable}
 						>
 							{date.getDate()}
-							{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
+							{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='__datenel_today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
 						</button>
 					})}
 				</div>
 			</div>
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
+			{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	)
 }
diff --git a/src/components/SingleWeekPicker.tsx b/src/components/SingleWeekPicker.tsx
index 95fc141..860191e 100644
--- a/src/components/SingleWeekPicker.tsx
+++ b/src/components/SingleWeekPicker.tsx
@@ -160,25 +160,25 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 	}
 
 	if (selectMonth) {
-		return <div className='datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
-			<div className='header'>
-				<button className='stepper' onClick={() => {
+		return <div className='__datenel_datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
+			<div className='__datenel_header'>
+				<button className='__datenel_stepper' onClick={() => {
 					if (currentYear <= 100) return
 					setCurrentYear(currentYear - 1)
 				}} aria-label={`Go to last year, ${currentYear - 1}, you are now at year ${currentYear}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<input className='indicator'
+				<input className='__datenel_indicator'
 					value={currentYear}
 					onChange={e => changeYear(e.target.value)}
 					onBlur={adjustYear}
 					aria-label="Year input, type a year to go to that year"
 				/>
-				<button className='stepper' onClick={() => {
+				<button className='__datenel_stepper' onClick={() => {
 					setCurrentYear(currentYear + 1)
 				}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='body'>
-				<div className='month-selector-body'>
-					{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
+			<div className='__datenel_body'>
+				<div className='__datenel_month-selector-body'>
+					{Array.from({ length: 12 }).map((_, index) => <button className={`__datenel_item`} key={index} onClick={() => {
 						setCurrentMonth(index)
 						setSelectMonth(false)
 					}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
@@ -186,50 +186,50 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 					</button>)}
 				</div>
 			</div>
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
+			{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	} else {
-		return <div className='datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>
+		return <div className='__datenel_datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>
 
-			<div className='header'>
-				<button className='stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<button className='indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
+			<div className='__datenel_header'>
+				<button className='__datenel_stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
+				<button className='__datenel_indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
 					{new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
 				</button>
-				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
+				<button className='__datenel_stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
 
-			<div className="body">
-				<div className="week-indicator">
-					<div className="item title">Wk</div>
+			<div className="__datenel_body">
+				<div className="__datenel_week-indicator">
+					<div className="__datenel_item __datenel_title">Wk</div>
 
-					{calendarWeeks.map(week => <div className={`item ${selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum && selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear ? 'active' : ''}`} key={calculateWeekNum(week[0]).weekNum} onClick={() => selectWeek(week[0])}>
+					{calendarWeeks.map(week => <div className={`__datenel_item ${selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum && selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear ? '__datenel_active' : ''}`} key={calculateWeekNum(week[0]).weekNum} onClick={() => selectWeek(week[0])}>
 						{calculateWeekNum(week[0]).weekNum}
 					</div>)}
 
 				</div>
 
-				<div className='calendar-view-body flex' aria-live="polite">
-					<div className="listitem">
-						{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)}
+				<div className='__datenel_calendar-view-body __datenel_flex' aria-live="polite">
+					<div className="__datenel_listitem">
+						{Array.from({ length: 7 }).map((_, index) => <div className='__datenel_item __datenel_day-indicator' key={index}>{l10nDays[index]}</div>)}
 					</div>
 
 					{calendarWeeks.map((week, index) => {
 						const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
-						return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])} aria-label={`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization || navigator.language, { dateStyle: "full" })} to ${week[6].toLocaleString(localization || navigator.language, { weekday: 'long' })}, ${week[6].toLocaleString(localization || navigator.language, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`}>
+						return <button className={`__datenel_listitem ${isSelected ? '__datenel_active' : ''}`} key={index} onClick={() => selectWeek(week[0])} aria-label={`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization || navigator.language, { dateStyle: "full" })} to ${week[6].toLocaleString(localization || navigator.language, { weekday: 'long' })}, ${week[6].toLocaleString(localization || navigator.language, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`}>
 							{week.map(date => <div
-								className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
+								className={`__datenel_item __datenel_date ${currentMonth !== date.getMonth() && '__datenel_extra-month'}`}
 								key={date.getDate()}
 							>
 								{date.getDate()}
-								{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
+								{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='__datenel_today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
 							</div>)}
 						</button>
 					})}
 				</div>
 			</div>
 
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
+			{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	}
 }
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index c3075f1..73fface 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,4 +1,4 @@
-.datenel-component {
+.__datenel_datenel-component {
 	user-select: none;
 	color: var(--datenel-main-color);
 
@@ -13,7 +13,7 @@
 		}
 	}
 
-	button.sr-only {
+	button.__datenel_sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -24,7 +24,7 @@
 		border: 0;
 	}
 
-	.header {
+	.__datenel_header {
 		padding: 0.75rem;
 		display: flex;
 		justify-content: space-between;
@@ -37,7 +37,7 @@
 				height: 1rem;
 			}
 
-			&.stepper {
+				&.__datenel_stepper {
 				width: 1.75rem;
 				height: 1.75rem;
 				display: flex;
@@ -46,14 +46,14 @@
 				border-radius: 50%;
 			}
 
-			&.indicator {
+				&.__datenel_indicator {
 				padding: 0.25rem 0.5rem;
 				border-radius: 0.25rem;
 				font-size: 0.75rem;
 			}
 		}
 
-		input.indicator {
+		input.__datenel_indicator {
 			border: none;
 			background: none;
 			text-align: center;
@@ -70,49 +70,49 @@
 		}
 	}
 
-	.body {
+	.__datenel_body {
 		display: flex;
-		.calendar-view-body {
+		.__datenel_calendar-view-body {
 			padding: 0.75rem;
 			gap: 0.125rem;
 
-			&.grid {
+			&.__datenel_grid {
 				display: grid;
 				grid-template-columns: repeat(7, 1fr);
 
-				.item.date {
+				.__datenel_item.__datenel_date {
 					border-radius: 50%;
 
-					&.extra-month, &.not-available {
+					&.__datenel_extra-month, &.__datenel_not-available {
 						cursor: default;
 					}
 
-					&.active {
+					&.__datenel_active {
 						background: var(--datenel-accent-color);
 						color: var(--datenel-reversed-color);
 					}
 				}
 			}
 
-			&.flex {
+			&.__datenel_flex {
 				display: flex;
 				flex-direction: column;
 
-				.listitem {
+				.__datenel_listitem {
 					padding: 0;
 					display: grid;
 					grid-template-columns: repeat(7, 1fr);
 					border-radius: 1rem;
 
-					.item.date {
+					.__datenel_item.__datenel_date {
 						background: none;
 					}
 
-					&.active {
+					&.__datenel_active {
 						background: var(--datenel-accent-color);
 						color: var(--datenel-reversed-color);
 
-						.extra-month, .not-available {
+						.__datenel_extra-month, .__datenel_not-available {
 							opacity: 0.5;
 						}
 					}
@@ -120,7 +120,7 @@
 
 			}
 
-			.item {
+			.__datenel_item {
 				width: 2rem;
 				height: 2rem;
 				display: flex;
@@ -129,18 +129,18 @@
 				font-size: 0.75rem;
 				position: relative;
 
-				&.extra-month, &.not-available {
+				&.__datenel_extra-month, &.__datenel_not-available {
 					opacity: 0.3;
 					&:hover {
 						background: none;
 					};
 				}
 
-				&.day-indicator {
+				&.__datenel_day-indicator {
 					opacity: 0.5;
 				}
 
-				.today-indicator {
+				.__datenel_today-indicator {
 					position: absolute;
 					bottom: 0.25rem;
 					width: 0.25rem;
@@ -149,18 +149,18 @@
 			}
 		}
 
-		.month-selector-body {
+		.__datenel_month-selector-body {
 			display: grid;
 			grid-template-columns: repeat(3, 1fr);
 			padding: 0.75rem;
 			gap: 0.125rem;
 
-			.item {
+			.__datenel_item {
 				border-radius: 0.25rem;
 				height: 2rem;
 				padding: 0 0.5rem;
 
-				&.not-available {
+				&.__datenel_not-available {
 					opacity: 0.3;
 					cursor: default;
 					&:hover {
@@ -170,14 +170,14 @@
 			}
 		}
 
-		.week-indicator {
+		.__datenel_week-indicator {
 			display: flex;
 			flex-direction: column;
 			border-right: 1px solid var(--datenel-border-color);
 			gap: 0.125rem;
 			padding: 0.75rem;
 
-			.item {
+			.__datenel_item {
 				font-size: 0.75rem;
 				width: 2rem;
 				height: 2rem;
@@ -187,10 +187,10 @@
 				border-radius: 50%;
 			}
 
-			.item.title {
+			.__datenel_item.__datenel_title {
 				opacity: 0.5;
 			}
-			.item.active {
+			.__datenel_item.__datenel_active {
 				background: var(--datenel-accent-color);
 				color: var(--datenel-reversed-color);
 			}