Notification - hextastudio/ui

hextastudio/ui needs your support to stay running 🫶 Help us

Default Notification

You got message!

Hextastudio/ui is worth the money!

Installation

bash

npx hexta-ui add avatar button

tsx

import { Avatar } from "@/components/hexta-ui/Avatar";
import { Button } from "@/components/hexta-ui/Button";

tsx

import { FaExternalLinkAlt } from "react-icons/fa";

const DefaultNotification = () => {
  return (
    <>
      <div>
        <div className="flex items-center gap-3 m-2 relative p-4 bg-zinc-950 rounded-md border-b border-b-white border-opacity-10 max-w-[24rem]">
          <div className="flex items-center gap-3">
            <div className="max-[414px]:hidden">
              <Avatar avatarUrl="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8aGVhZHNob3R8ZW58MHx8MHx8fDA%3D" />

Notification with Buttons

New Update available!

Please upgrade software for best experience.

tsx

import { RxCross2 } from "react-icons/rx";

const NotificationWithIconAndLink = () => {
  return (
    <>
      <div>
        <div className="flex items-center gap-3 m-2 relative p-4 px-6 bg-zinc-950 rounded-md border-b border-b-white border-opacity-10 max-w-[24rem]">
          <div className="flex items-center gap-2">
            <div className="flex flex-col gap-2">
              <div className="flex flex-col">