Playground

Test Fluix toast notifications in real time. Pick a type, position, layout, and theme.

import { Toaster, fluix } from "@fluix-ui/react";
import "@fluix-ui/css";

function App() {
  return (
    <>
      <Toaster config={{
        position: "top-right",
        layout: "stack",
        offset: 24,
        defaults: { theme: "light" },
      }} />
      <button onClick={() => {
        fluix.success({ title: "Hello!" });
      }}>
        Fire Toast
      </button>
    </>
  );
}
Preview
Click a toast type below to preview
LayoutPosition