Skip to content
Get help on Slack

Difficulty importing Sanity components discussed, solution provided

11 replies
Last updated: Aug 17, 2021
Hey all,I am finding it hard to identify how to import various Sanity components. For example I would like to import the Alert into my custom component but all of the following do not work:

import Alert from "part:@sanity/components/Alert";
import Alert from "part:@sanity/components/alerts/default";
import Alert from "part:@sanity/components/alerts/Alert";
I have however been able to import the default button and dialog using these imports

import Button from "part:@sanity/components/buttons/default";
import Dialog from "part:@sanity/components/dialogs/default";
I wasn’t able to find much documentation on this other than a few examples here:

https://www.sanity.io/docs/custom-input-widgets
Aug 17, 2021, 5:58 AM
Have you tried importing from sanityui? ie.
import { Alert } from '@sanity/ui'

Aug 17, 2021, 7:59 AM
Actually cant see an alert component in there so ignore that, https://www.sanity.io/ui/docs
Aug 17, 2021, 8:02 AM
Hmm interesting though, would @sanity/ui be considered the best practice? Or is neither preferred?
Aug 17, 2021, 8:35 AM
what is it you're trying to ideally have?
Aug 17, 2021, 8:59 AM
Just display a warning, with warning style colours. Something along the lines of this:
Aug 17, 2021, 9:02 AM
Obviously this isn’t from the admin, but the docs but you get the jist
Aug 17, 2021, 9:03 AM
Aug 17, 2021, 9:03 AM
Hi! You can create this component yourself with 
@sanity/ui
, as it looks like the Alert component is legacy code. Here something I put together in the UI arcade for you, hope it helps: https://www.sanity.io/ui/arcade?mode=jsx&jsx=eJx1U01v1DAQvfdXPPm8bQqtxCXZA5WKkFAPwA[…]cExB0eBysWzCSWfqaj7TV6egrqaB%2Fft7gK2r6Uqsz%2FS7vz7rP9QQ7Qc%3D
Aug 17, 2021, 10:49 AM
And I would definitely recommend using 
@sanity/ui
when developing for the Studio 👍
Aug 17, 2021, 10:49 AM
Hi! You can create this component yourself with 
@sanity/ui
, as it looks like the Alert component is legacy code. Here something I put together in the UI arcade for you, hope it helps: https://www.sanity.io/ui/arcade?mode=jsx&jsx=eJx1U01v1DAQvfdXPPm8bQqtxCXZA5WKkFAPwA[…]cExB0eBysWzCSWfqaj7TV6egrqaB%2Fft7gK2r6Uqsz%2FS7vz7rP9QQ7Qc%3D
Aug 17, 2021, 10:49 AM
👍 Thanks for the help 😊
Aug 17, 2021, 12:06 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?