Sileo

https://sileo.aaryan.design/docs
Admin
Sileo is a tiny, opinionated toast notification component for React that uses gooey SVG morphing and...
Tokens:2,489
Snippets:39
Trust Score:4.6
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Sileo

Source: https://sileo.aaryan.design/docs

Install the package via npm.

```bash
npm install sileo
```

--------------------------------

### Apply Custom Toast Styles

Source: https://sileo.aaryan.design/docs/api

Example of using SileoOptions to apply custom styling to a success toast.

```javascript
sileo.success({
  title: "Custom styled",
  fill: "black",
  styles: {
    title: "text-white!",
    description: "text-white/75!",
    badge: "bg-white/20!",
    button: "bg-white/10!",
  },
});
```

--------------------------------

### Handle Promises with Sileo

Source: https://sileo.aaryan.design/docs/api

Example of using sileo.promise to manage loading, success, and error states based on a promise result.

```javascript
sileo.promise(createUser(data), {
  loading: { title: "Creating account..." },
  success: (user) => ({
    title: `Welcome, ${user.name}!`,
  }),
  error: (err) => ({
    title: "Signup failed",
    description: err.message,
  }),
});
```

--------------------------------

### Import Sileo

Source: https://sileo.aaryan.design/docs/api

Import the global toast controller to trigger notifications.

```javascript
import { sileo } from "sileo";
```

--------------------------------

### sileo.promise(promise, opts)

Source: https://sileo.aaryan.design/docs/api

Handles a promise-based toast flow, showing a loading state and transitioning to success or error based on the promise result.

```APIDOC
## sileo.promise(promise, opts)

### Description
Manages a toast notification that reflects the lifecycle of a promise (loading, success, error).

### Parameters
- **promise** (Promise) - Required - The promise to track.
- **opts** (SileoPromiseOptions) - Required - Configuration for loading, success, and error states.

### Returns
- **promise** (Promise) - The original promise.
```

--------------------------------

### sileo.success(options)

Source: https://sileo.aaryan.design/docs/api

Triggers a green success toast notification.

```APIDOC
## sileo.success(options)

### Description
Displays a green success toast notification.

### Parameters
- **options** (SileoOptions) - Required - Configuration object for the toast.

### Returns
- **id** (string) - The unique identifier of the toast.
```

--------------------------------

### Configure Toaster

Source: https://sileo.aaryan.design/docs

Add the Toaster component to the root layout to enable notifications.

```javascript
import { sileo, Toaster } from "sileo";

export default function App() {
  return (
    <>
      <Toaster position="top-right" />
      <YourApp />
    </>
  );
}
```

--------------------------------

### Import Toaster Component

Source: https://sileo.aaryan.design/docs/api/toaster

Import the Toaster component from the sileo package.

```typescript
import { Toaster } from "sileo";
```

--------------------------------

### Configure Global Toaster Defaults

Source: https://sileo.aaryan.design/docs/styling

Apply consistent styling and configuration across all toasts by passing an options object to the Toaster component.

```jsx
<Toaster
  position="top-right"
  options={{
    fill: "#171717",
    roundness: 16,
    styles: {
      title: "text-white!",
      description: "text-white/75!",
      badge: "bg-white/10!",
      button: "bg-white/10! hover:bg-white/15!",
    },
  }}
/>
```

--------------------------------

### Define SileoButton Interface

Source: https://sileo.aaryan.design/docs/api

Configuration interface for action buttons within a toast.

```typescript
interface SileoButton {
  title: string;
  onClick: () => void;
}
```

--------------------------------

### Define SileoPromiseOptions Interface

Source: https://sileo.aaryan.design/docs/api

Configuration interface for handling promise-based toast states.

```typescript
interface SileoPromiseOptions<T = unknown> {
  loading: SileoOptions;
  success: SileoOptions | ((data: T) => SileoOptions);
  error: SileoOptions | ((err: unknown) => SileoOptions);
  action?: SileoOptions | ((data: T) => SileoOptions);
  position?: SileoPosition;
}
```

--------------------------------

### Configure Toaster Offset

Source: https://sileo.aaryan.design/docs/api/toaster

Define the distance from viewport edges using a number, string, or per-side configuration object.

```jsx
<Toaster offset={20} />

<Toaster offset={{ top: 20, right: 16 }} />
```

--------------------------------

### Set Global Toast Options

Source: https://sileo.aaryan.design/docs/api/toaster

Apply default options to every toast rendered by the component.

```jsx
<Toaster
  options={{
    fill: "#171717",
    styles: { description: "text-white/75!" },
  }}
/>
```

--------------------------------

### Define SileoPosition Type

Source: https://sileo.aaryan.design/docs/api/toaster

The available positions for toast placement within the viewport.

```typescript
type SileoPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";
```

--------------------------------

### Set Toast Positions

Source: https://sileo.aaryan.design/docs

Define the default position on the Toaster or override it for individual toasts.

```javascript
<Toaster position="top-right" />

sileo.success({
  title: "Saved",
  position: "bottom-center",
});
```

--------------------------------

### Override CSS Variables

Source: https://sileo.aaryan.design/docs/styling

Customize state colors, dimensions, and animation timing globally by overriding Sileo's CSS custom properties in your stylesheet.

```css
:root {
  /* State colors (oklch) */
  --sileo-state-success: oklch(0.723 0.219 142.136);
  --sileo-state-loading: oklch(0.556 0 0);
  --sileo-state-error: oklch(0.637 0.237 25.331);
  --sileo-state-warning: oklch(0.795 0.184 86.047);
  --sileo-state-info: oklch(0.685 0.169 237.323);
  --sileo-state-action: oklch(0.623 0.214 259.815);

  /* Dimensions */
  --sileo-width: 350px;
  --sileo-height: 40px;

  /* Animation */
  --sileo-duration: 600ms;
}
```

```css
:root {
  --sileo-state-success: oklch(0.7 0.2 200);
}
```

--------------------------------

### sileo.clear()

Source: https://sileo.aaryan.design/docs/styling

Removes all active toasts from the UI.

```APIDOC
## sileo.clear()

### Description
Removes all currently visible toasts from the screen.
```

--------------------------------

### sileo.dismiss(id)

Source: https://sileo.aaryan.design/docs/styling

Removes a specific toast from the UI by its ID.

```APIDOC
## sileo.dismiss(id)

### Description
Removes a specific toast instance identified by its unique ID.

### Parameters
- **id** (string) - Required - The unique identifier of the toast to be removed.
```

--------------------------------

### Define SileoStyles Interface

Source: https://sileo.aaryan.design/docs/api

Interface for overriding CSS classes on toast sub-elements.

```typescript
interface SileoStyles {
  title?: string;
  description?: string;
  badge?: string;
  button?: string;
}
```

--------------------------------

### Toaster Component

Source: https://sileo.aaryan.design/docs/api/toaster

The Toaster component is the primary viewport component for rendering toasts. It should be added once to your application layout.

```APIDOC
## Toaster Component

### Description
The Toaster component renders toast notifications. It should be included once in the application layout.

### Props
- **children** (ReactNode) - Optional - App content to render alongside toasts
- **position** (SileoPosition) - Optional - Default: "top-right" - Default position for all toasts
- **offset** (number | string | object) - Optional - Distance from viewport edges
- **options** (Partial<SileoOptions>) - Optional - Default options merged into every toast
- **theme** ("light" | "dark" | "system") - Optional - Automatically sets fill based on color scheme

### Usage Example
```jsx
import { Toaster } from "sileo";

<Toaster 
  position="top-right" 
  offset={20} 
  theme="system" 
/>
```
```

--------------------------------

### sileo.dismiss(id)

Source: https://sileo.aaryan.design/docs/api

Dismisses a specific toast notification by its ID.

```APIDOC
## sileo.dismiss(id)

### Description
Removes a specific toast from the screen.

### Parameters
- **id** (string) - Required - The ID of the toast to dismiss.
```
Tokens:
Raw