Logo
  • Documentation
  • Components
  • New Component Request
GitHub
GitHub
    Treon Studio
    Discord
    Twitter

    Welcome

    Introduction
    Components
    Contributors
    Installation
    Roadmap
    Status - Beta

    Components

    Author TooltipCalendar Event CardCode BlockComponent Preview TooltipChat ComposerEmail Compose CardFile DropzoneFile PreviewGitHub Stars ButtonGoal CardHolo CardKnowledge GraphLink PreviewiOS Message BubblesModel SelectorNavbar MenuNested MenuNotification CardPricing CardRaised ButtonSearch Results TabsSlash Command DropdownTodo ItemTwitter CardWeather CardWorkflow Card

    Form Inputs

    Async Select
    Button
    Button Group
    Checkbox
    Color Picker
    Combobox
    Hierarchical Select
    Input
    Input Base
    Input O T P
    Mask Input
    Multi Select
    Number Input
    Radio Card Group
    Radio Group
    Range Slider
    Search Input
    Segmented Button
    Select
    Slider
    Switch
    Tag Input
    Textarea
    Voice Input

    Layout

    Aspect Ratio
    Card
    Card Icons
    Card Input
    Collapsible
    Divider
    Grid
    Island
    Panel
    Portal
    Resizable
    Scroll Area
    Scroll Shadow
    Separator
    Spacer
    Visually Hidden
    Visually Hidden Input

    Navigation

    Breadcrumb
    Context Menu
    Dropdown Menu
    Menu
    Navbar
    Pagination
    Sidebar
    Steps
    Tab Navigation
    Tabs

    Feedback

    Alert
    Banner
    Callout
    Circular Progress
    Empty State
    Error Message
    Error Page
    Loader Inline
    Loader Screen
    Progress
    Progress Bar
    Skeleton
    Spinner
    Status Dot
    Toast
    Toaster
    Tooltip
    Top Banner
    Tour

    Data Display

    Advanced Table
    Badge
    Badge Overflow
    Data Table
    Description List
    Listbox
    Table
    Tag
    Timeline
    Tree
    Virtualized

    Overlays

    Alert Dialog
    Dialog
    Dialog Stack
    Drawer
    Hover Card
    Popover

    Charts

    Area Chart
    Bar Chart
    Bar List
    Category Bar
    Combo Chart
    Comparison
    Conditional Bar Chart
    Contribution Graph
    Radar Chart

    Calendars

    Attendance Calendar
    Calendar
    Date Picker
    Date Time Field
    Full Calendar
    Gantt
    Mini Calendar
    Schedule
    Schedule Grid
    Time Field

    Typography

    Code
    Code Block
    Control Help
    Control Label
    Field
    Heading
    Kbd
    Label
    Link
    Markdown
    Rich Text Editor
    Snippet
    Text

    Media

    Avatar
    Avatar Group
    Deck
    Document Preview
    File List
    File Upload
    Glimpse
    Image
    Image Crop
    Image Zoom
    Photo Gallery
    Profile Picture
    Q R Code
    Q R Scanner

    User

    Discussion
    Rating
    Testimonial
    User
    User Card

    Interactive

    Accordion
    Action Bar
    Command
    Copy Button
    Cursor
    Emoji Picker
    Fade
    Inline Edit
    Kanban
    Marquee
    Orbit
    Ripple
    Sortable

    Specialized

    App Header
    Bulk Grade Input
    Credit Card
    Footer
    Level Picker
    Notification Card
    Password Strength
    Payment Method
    Pricing Table
    Sandbox
    Stat Card
    Ticker
    Usage Card
    Wizard
    DocsBungasSpecialized

    Notification Card

    Notification Card component from @bungas/ui

    Made with ❤️ byTreon Studio.Source code available onGitHub

    On This Page

    • Installation
    • Usage
    • Props
    • Examples
    • Default
    • Related Components
    Website screenshot
    Meet Bungas
    Your open-source, proactive personal AI assistant with 200+ integrations. Bungas combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.

    Notification Card

    The NotificationCard component from Bungas UI.

    All Variants

    Default notification

    1m

    Notifikasi biasa

    Info notification

    5m

    Notifikasi informasi

    Success notification

    10m

    Notifikasi sukses

    Warning notification

    1h

    Notifikasi peringatan

    Danger notification

    2h

    Notifikasi bahaya

    With Custom Icon

    Jadwal Rapat Orang Tua

    3 jam lalu

    Rapat orang tua akan diadakan pada Sabtu, 20 Januari 2025.

    With Avatar
    AW

    Pesan dari Wali Kelas

    30 menit lalu

    Bu Ani mengirimkan pesan tentang perkembangan anak Anda.

    With Actions

    Undangan Rapat

    1 jam lalu

    Anda diundang untuk menghadiri rapat komite sekolah.

    Dismissible

    Notifikasi dapat ditutup

    Baru saja

    Klik tombol X untuk menutup notifikasi ini.

    Unread with Dot

    Pengumuman Penting

    10 menit lalu

    Libur nasional akan datang.

    Notification List

    Notifikasi

    2 belum dibaca

    Pembayaran SPP Diterima

    5 menit lalu

    Pembayaran untuk bulan Januari telah berhasil.

    Jadwal Ujian Diterbitkan

    1 jam lalu

    Jadwal UTS semester genap sudah tersedia.

    Rapor Semester 1 Tersedia

    Kemarin

    Rapor semester 1 sudah dapat diunduh.

    Empty List

    Tidak ada notifikasi baru

      Installation

      npm install @bungas/ui
      Import
      import { NotificationCard } from "@bungas/ui"

      Usage

      import { NotificationCard } from "@bungas/ui"
       
      export function Example() {
        return <NotificationCard />
      }

      Props

      Examples

      Default

      All Variants

      Default notification

      1m

      Notifikasi biasa

      Info notification

      5m

      Notifikasi informasi

      Success notification

      10m

      Notifikasi sukses

      Warning notification

      1h

      Notifikasi peringatan

      Danger notification

      2h

      Notifikasi bahaya

      With Custom Icon

      Jadwal Rapat Orang Tua

      3 jam lalu

      Rapat orang tua akan diadakan pada Sabtu, 20 Januari 2025.

      With Avatar
      AW

      Pesan dari Wali Kelas

      30 menit lalu

      Bu Ani mengirimkan pesan tentang perkembangan anak Anda.

      With Actions

      Undangan Rapat

      1 jam lalu

      Anda diundang untuk menghadiri rapat komite sekolah.

      Dismissible

      Notifikasi dapat ditutup

      Baru saja

      Klik tombol X untuk menutup notifikasi ini.

      Unread with Dot

      Pengumuman Penting

      10 menit lalu

      Libur nasional akan datang.

      Notification List

      Notifikasi

      2 belum dibaca

      Pembayaran SPP Diterima

      5 menit lalu

      Pembayaran untuk bulan Januari telah berhasil.

      Jadwal Ujian Diterbitkan

      1 jam lalu

      Jadwal UTS semester genap sudah tersedia.

      Rapor Semester 1 Tersedia

      Kemarin

      Rapor semester 1 sudah dapat diunduh.

      Empty List

      Tidak ada notifikasi baru

        Related Components

        • AppHeader
        • BulkGradeInput
        • CreditCard