%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/react
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/emilkowalski/sonner")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/emilkowalski/sonner" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - emilkowalski/sonner: An opinionated toast component for React.</div>
<div class="nifty-link-card-description">An opinionated toast component for React. Contribute to emilkowalski/sonner development by creating an account on GitHub.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/emilkowalski/sonner
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/b16be3ed41dcbc6f48b2786ce6eec4982178f7cf2ceec9eca5e45d4d2fa386a2/emilkowalski/sonner')">
</div>
</div>
</a>
</div>
%% run end %%
[Toast() – Sonner (emilkowal.ski)](https://sonner.emilkowal.ski/toast)
<video src="https://user-images.githubusercontent.com/50796600/246908436-59b95cb7-9068-4f3e-8469-0b35d9de5cf0.mp4" controls="controls" style="width: 100%;"></video>
## [Usage](https://github.com/emilkowalski/sonner#usage)
To start using the library, install it in your project:
```shell
npm install sonner
```
Add `<Toaster />` to your app, it will be the place where all your toasts will be rendered. After that you can use `toast()` from anywhere in your app.
```js
import { Toaster, toast } from 'sonner';
// ...
function App() {
return (
<div>
<Toaster />
<button onClick={() => toast('My first toast')}>Give me a toast</button>
</div>
);
}
```