ReScript Shadcn
Get started
  • Installation
Components
  • Accordion
  • Alert
  • AlertDialog
  • AspectRatio
  • Attachment
  • Avatar
  • Badge
  • Breadcrumb
  • Bubble
  • Button
  • ButtonGroup
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • ContextMenu
  • DataTable
  • DatePicker
  • Dialog
  • Direction
  • Drawer
  • DropdownMenu
  • Empty
  • Field
  • HoverCard
  • Input
  • InputGroup
  • InputOtp
  • Item
  • Kbd
  • Label
  • Marker
  • Menubar
  • Message
  • MessageScroller
  • NativeSelect
  • NavigationMenu
  • Pagination
  • Popover
  • Progress
  • RadioGroup
  • Resizable
  • ScrollArea
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • ToggleGroup
  • Tooltip
  • Typography

Sonner

An opinionated toast component for React.

About#

Sonner is built and maintained by emilkowalski.

Installation#

Run the following command:

npx shadcn@latest add @rescript-shadcn/Sonner

Add the Toaster component

app/layout.res
module RootLayout = {
  @react.component 
  let make = (~children) => 
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Sonner />
      </body>
    </html>
}

Usage#

Sonner.toast("Event has been created"->React.string)

Examples#

Types#

Description#

Position#

Use the position prop to change the position of the toast.

API Reference#

See the Sonner API Reference for more information.

@@directive("'use client'")

@react.component
@@directive("'use client'")

@react.component
@@directive("'use client'")

@react.component
@@directive("'use client'")

type res = {name: string}