Inconsistency in docs for components (example Toast(er) )

[codeagencybe]

Hello Shad

I was just experimenting with your library first time and was trying the Toaster component but I ran into confusing docs. Maybe you are still in the process re-documenting stuff?

Anyway, I came across this mismatch information:

Your docs says the import has to be like

import { Toaster } from "@/components/ui/toaster"

But the actual component is not toaster but toast and raising errors.

It's nothing major as I just compare the actual file names with your docs but it catches one offguard if you don't look close on the naming convention.

Is there anyway for me and others to help you spotting these changes and do a PR with the correct update for the docs? I tried searching for the docs in your repo but I think they are not in there?

Thanks!

[dan5py]

The Toaster component is used as a container for all your toasts and it's recommended to place it at the root of the app. The Toast component instead, is the actual toast element where your data are displayed.

However you need to use the toast function returned by the useToast hook to actually use the component.

import { useToast } from "@/components/ui/use-toast"
...
const { toast } = useToast();

[codeagencybe]

The Toaster component is used as a container for all your toasts and it's recommended to place it at the root of the app. The Toast component instead, is the actual toast element where your data are displayed.

However you need to use the toast function returned by the useToast hook to actually use the component.

import { useToast } from "@/components/ui/use-toast"
...
const { toast } = useToast();

Yes I know that but your feedback has nothing to do with point I'm reporting. There is a mistake in the naming convention.

Look closely. The import line from the docs are pointing to import { Toaster } from "@/components/ui/toaster"

while the actual ui component is toast (not toaster)

If you follow the exact steps from docs, you end up with a non-working example.

[dan5py]

Now I got it. When your run the add toast command the toaster.tsx isn't created. This an already known issue, like pointed out in #234.

This will be fixed in the next cli version.

For now create the toaster.tsx file by following the manual installation.

[codeagencybe]

Now I got it. When your run the add toast command the toaster.tsx isn't created. This an already known issue, like pointed out in #234.

This will be fixed in the next cli version.

For now create the toaster.tsx file by following the manual installation.

ahaa! OK seems like I took for my first testing immediately one of the components that's broken lol. Thanks for pointing out, I will try some other components instead.

Are there any other components like Toaster that are also broken in similar way? Then I can avoid those too for now 😆

PS: what is the way for contributing back to the docs if we spot something? Can we do changes and PR back? Or just report here as issue?

[dan5py]

Are there any other components like Toaster that are also broken in similar way? Then I can avoid those too for now 😆

Seems the only one for now.

PS: what is the way for contributing back to the docs if we spot something? Can we do changes and PR back? Or just report here as issue?

Sure! PR are well appreciated. Just check that a PR for that issue hasn't already been submitted and you're good to go.

[Tansi-Jones]

Hello Shad,

I'm also trying to import the toast components, but the installation code is for the Avatar components instead of Toast, please advice??

[dan5py]

Hi @Tansi-Jones, there's a mistake in the docs of the toast component.

To install the component simply run npx shadcn-ui@latest add toast. After the installation is completed you can follow the rest of the guide, starting from the Add the Toaster component.

If you need the code for the manual installation just let me know.

[Tansi-Jones]

Thanks @dan5py

[cjonesuk]

For now create the toaster.tsx file by following the manual installation.

I just tried following the manual installation instructions and the code that it says to copy into my project doesn't contain a component called Toaster. Sorry if i'm missing something obvious.

EDIT: I've grabbed the code from the github repo rather than the website, i think it's just missing a section about the toaster component.

[dan5py]

EDIT: I've grabbed the code from the github repo rather than the website, i think it's just missing a section about the toaster component.

@cjonesuk yeah with the new version the toast's docs is missing the additional files in the manual installation.

[feyiamujo1]

The toast documentation is missing the use-toast code for the manual installation

[dan5py]

The toast documentation is missing the use-toast code for the manual installation

@feyiamujo1 Yeah, I opened an issue (#687) for that.

[castrolem]

Not sure if this is the best thread, it looks like the manual install of the Toast component is missing the animation/keyframes that are used in the examples.

[lok1984]

http://tinyurl.com/yn5pf84y i am getting this error when using toaser Error: (0 , components_ui_use_toast__WEBPACK_IMPORTED_MODULE_3_.useToast) is not a function

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.