Snackbar Components
Beautiful snackbar components built with TailwindCSS. Perfect for temporary notifications and messages.
1. Basic Snackbar
A simple snackbar notification that appears at the bottom of the screen.
This is a basic snackbar message.
<!-- Basic Snackbar -->
<div x-data="{ showSnackbar: false }">
<button @click="showSnackbar = true" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<div x-show="showSnackbar" x-transition:enter="transform ease-out duration-300" x-transition:enter-start="translate-y-full opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transform ease-in duration-300" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-full opacity-0" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg z-50">
<p>This is a basic snackbar message.</p>
<button @click="showSnackbar = false" class="absolute top-2 right-2 text-gray-400 hover:text-white">×</button>
</div>
</div><template>
<!-- Basic Snackbar -->
<div>
<button @click="showSnackbar = true" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<transition enter-active-class="transform ease-out duration-300" enter-from-class="translate-y-full opacity-0" enter-to-class="translate-y-0 opacity-100" leave-active-class="transform ease-in duration-300" leave-from-class="translate-y-0 opacity-100" leave-to-class="translate-y-full opacity-0">
<div v-if="showSnackbar" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg z-50">
<p>This is a basic snackbar message.</p>
<button @click="showSnackbar = false" class="absolute top-2 right-2 text-gray-400 hover:text-white">×</button>
</div>
</transition>
</div>
</template>
<script setup>
import { ref } from 'vue'
const showSnackbar = ref(false)
</script>import React, { useState } from 'react'
export default function BasicSnackbar() {
const [showSnackbar, setShowSnackbar] = useState(false)
return (
<div>
<button onClick={() => setShowSnackbar(true)} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
{showSnackbar && (
<div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300">
<p>This is a basic snackbar message.</p>
<button onClick={() => setShowSnackbar(false)} className="absolute top-2 right-2 text-gray-400 hover:text-white">×</button>
</div>
)}
</div>
);
}2. Snackbar with Action
A snackbar with an action button for user interaction.
Item added to cart successfully.
<!-- Snackbar with Action -->
<div x-data="{ showSnackbar: false }">
<button @click="showSnackbar = true" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<div x-show="showSnackbar" x-transition:enter="transform ease-out duration-300" x-transition:enter-start="translate-y-full opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transform ease-in duration-300" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-full opacity-0" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center justify-between">
<p>Item added to cart successfully.</p>
<div class="flex space-x-2">
<button @click="showSnackbar = false" class="text-purple-400 hover:text-purple-300 font-medium">Undo</button>
<button @click="showSnackbar = false" class="text-gray-400 hover:text-white">×</button>
</div>
</div>
</div><template>
<!-- Snackbar with Action -->
<div>
<button @click="showSnackbar = true" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<transition enter-active-class="transform ease-out duration-300" enter-from-class="translate-y-full opacity-0" enter-to-class="translate-y-0 opacity-100" leave-active-class="transform ease-in duration-300" leave-from-class="translate-y-0 opacity-100" leave-to-class="translate-y-full opacity-0">
<div v-if="showSnackbar" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center justify-between">
<p>Item added to cart successfully.</p>
<div class="flex space-x-2">
<button @click="showSnackbar = false" class="text-purple-400 hover:text-purple-300 font-medium">Undo</button>
<button @click="showSnackbar = false" class="text-gray-400 hover:text-white">×</button>
</div>
</div>
</transition>
</div>
</template>
<script setup>
import { ref } from 'vue'
const showSnackbar = ref(false)
</script>import React, { useState } from 'react'
export default function SnackbarWithAction() {
const [showSnackbar, setShowSnackbar] = useState(false)
return (
<div>
<button onClick={() => setShowSnackbar(true)} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
{showSnackbar && (
<div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center justify-between transform transition-all duration-300">
<p>Item added to cart successfully.</p>
<div className="flex space-x-2">
<button onClick={() => setShowSnackbar(false)} className="text-purple-400 hover:text-purple-300 font-medium">Undo</button>
<button onClick={() => setShowSnackbar(false)} className="text-gray-400 hover:text-white">×</button>
</div>
</div>
)}
</div>
);
}3. Success Snackbar
A green success snackbar with an icon.
Operation completed successfully!
<!-- Success Snackbar -->
<div x-data="{ showSnackbar: false }">
<button @click="showSnackbar = true" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<div x-show="showSnackbar" x-transition:enter="transform ease-out duration-300" x-transition:enter-start="translate-y-full opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transform ease-in duration-300" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-full opacity-0" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<p>Operation completed successfully!</p>
<button @click="showSnackbar = false" class="ml-auto text-green-200 hover:text-white">×</button>
</div>
</div><template>
<!-- Success Snackbar -->
<div>
<button @click="showSnackbar = true" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<transition enter-active-class="transform ease-out duration-300" enter-from-class="translate-y-full opacity-0" enter-to-class="translate-y-0 opacity-100" leave-active-class="transform ease-in duration-300" leave-from-class="translate-y-0 opacity-100" leave-to-class="translate-y-full opacity-0">
<div v-if="showSnackbar" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<p>Operation completed successfully!</p>
<button @click="showSnackbar = false" class="ml-auto text-green-200 hover:text-white">×</button>
</div>
</transition>
</div>
</template>
<script setup>
import { ref } from 'vue'
const showSnackbar = ref(false)
</script>import React, { useState } from 'react'
export default function SuccessSnackbar() {
const [showSnackbar, setShowSnackbar] = useState(false)
return (
<div>
<button onClick={() => setShowSnackbar(true)} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
{showSnackbar && (
<div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center transform transition-all duration-300">
<svg className="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<p>Operation completed successfully!</p>
<button onClick={() => setShowSnackbar(false)} className="ml-auto text-green-200 hover:text-white">×</button>
</div>
)}
</div>
);
}4. Error Snackbar
A red error snackbar with an icon.
An error occurred. Please try again.
<!-- Error Snackbar -->
<div x-data="{ showSnackbar: false }">
<button @click="showSnackbar = true" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<div x-show="showSnackbar" x-transition:enter="transform ease-out duration-300" x-transition:enter-start="translate-y-full opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transform ease-in duration-300" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-full opacity-0" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
<p>An error occurred. Please try again.</p>
<button @click="showSnackbar = false" class="ml-auto text-red-200 hover:text-white">×</button>
</div>
</div><template>
<!-- Error Snackbar -->
<div>
<button @click="showSnackbar = true" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<transition enter-active-class="transform ease-out duration-300" enter-from-class="translate-y-full opacity-0" enter-to-class="translate-y-0 opacity-100" leave-active-class="transform ease-in duration-300" leave-from-class="translate-y-0 opacity-100" leave-to-class="translate-y-full opacity-0">
<div v-if="showSnackbar" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
<p>An error occurred. Please try again.</p>
<button @click="showSnackbar = false" class="ml-auto text-red-200 hover:text-white">×</button>
</div>
</transition>
</div>
</template>
<script setup>
import { ref } from 'vue'
const showSnackbar = ref(false)
</script>import React, { useState } from 'react'
export default function ErrorSnackbar() {
const [showSnackbar, setShowSnackbar] = useState(false)
return (
<div>
<button onClick={() => setShowSnackbar(true)} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
{showSnackbar && (
<div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center transform transition-all duration-300">
<svg className="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
<p>An error occurred. Please try again.</p>
<button onClick={() => setShowSnackbar(false)} className="ml-auto text-red-200 hover:text-white">×</button>
</div>
)}
</div>
);
}5. Snackbar with Auto-Hide
A snackbar that automatically hides after a few seconds.
This snackbar will auto-hide in 3 seconds.
<!-- Snackbar with Auto-Hide -->
<div x-data="{ showSnackbar: false }">
<button @click="showSnackbar = true; setTimeout(() => showSnackbar = false, 3000)" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<div x-show="showSnackbar" x-transition:enter="transform ease-out duration-300" x-transition:enter-start="translate-y-full opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transform ease-in duration-300" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-full opacity-0" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-blue-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center justify-between">
<p>This snackbar will auto-hide in 3 seconds.</p>
<button @click="showSnackbar = false" class="text-blue-200 hover:text-white">×</button>
</div>
</div><template>
<!-- Snackbar with Auto-Hide -->
<div>
<button @click="showSnackbar = true; setTimeout(() => showSnackbar = false, 3000)" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
<transition enter-active-class="transform ease-out duration-300" enter-from-class="translate-y-full opacity-0" enter-to-class="translate-y-0 opacity-100" leave-active-class="transform ease-in duration-300" leave-from-class="translate-y-0 opacity-100" leave-to-class="translate-y-full opacity-0">
<div v-if="showSnackbar" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-blue-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center justify-between">
<p>This snackbar will auto-hide in 3 seconds.</p>
<button @click="showSnackbar = false" class="text-blue-200 hover:text-white">×</button>
</div>
</transition>
</div>
</template>
<script setup>
import { ref } from 'vue'
const showSnackbar = ref(false)
</script>import React, { useState, useEffect } from 'react'
export default function SnackbarWithAutoHide() {
const [showSnackbar, setShowSnackbar] = useState(false)
const handleShow = () => {
setShowSnackbar(true)
setTimeout(() => setShowSnackbar(false), 3000)
}
return (
<div>
<button onClick={handleShow} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">Show Snackbar</button>
{showSnackbar && (
<div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-blue-600 text-white px-4 py-3 rounded-lg shadow-lg z-50 flex items-center justify-between transform transition-all duration-300">
<p>This snackbar will auto-hide in 3 seconds.</p>
<button onClick={() => setShowSnackbar(false)} className="text-blue-200 hover:text-white">×</button>
</div>
)}
</div>
);
}