How to import Sanity Alert component in custom component?

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
AI Update

I can see you're working with Sanity Studio v2 and hitting the classic Parts System import inconsistency issue. The problem is that not all components were exposed through the parts system with predictable naming patterns - which is exactly why you're finding Button and Dialog work but Alert doesn't.

The Alert component wasn't consistently exposed as a part in Studio v2. Here are your options:

Quick Solutions for Studio v2

Option 1: Use Card from @sanity/ui instead

The @sanity/ui library should be available even in later v2 versions and provides building blocks you can use for alert-like UI:

import {Card, Text} from '@sanity/ui'

// Use Card with tone prop for alert styling
<Card tone="critical" padding={3} radius={2}>
  <Text>This is your alert message</Text>
</Card>

The tone prop accepts values like "critical", "caution", "positive", or "primary" to style it like different alert types.

Option 2: Use Toast/Snackbar

If you need notifications rather than inline alerts, try the Snackbar component which was more reliably exposed:

import Snackbar from 'part:@sanity/components/snackbar/default'

Option 3: Build your own simple Alert wrapper

Since you have access to Card and other primitives from @sanity/ui, you can create a simple Alert component wrapper that matches your needs.

Why This Happens

The Parts System was designed primarily for plugin extensibility points - places where Sanity wanted developers to override behavior. Components like Button and Dialog were explicitly exposed because they were meant to be customizable. Alert wasn't a standard override point, so it wasn't consistently available through part:@sanity/components/* imports.

You can check what parts are actually available in your project by looking at node_modules/@sanity/components/sanity.json to see the declared parts.

The Better Path: Upgrade to Studio v3/v4

Important: Studio v2 support ended in December 2023, and the Parts System has been completely replaced. If you upgrade to Studio v3 or v4, you get clean, predictable imports:

import {Card, Text, Box, Stack} from '@sanity/ui'

// All components are directly importable - no more parts system
<Card tone="critical" padding={4}>
  <Stack space={3}>
    <Text weight="semibold">Alert Title</Text>
    <Text>Your alert message here</Text>
  </Stack>
</Card>

The new system gives you full TypeScript support, better documentation, and consistent access to all Sanity UI components. No more guessing import paths!

Show original thread
11 replies
Have you tried importing from sanityui? ie.
import { Alert } from '@sanity/ui'

Actually cant see an alert component in there so ignore that, https://www.sanity.io/ui/docs
Hmm interesting though, would @sanity/ui be considered the best practice? Or is neither preferred?
what is it you're trying to ideally have?
Just display a warning, with warning style colours. Something along the lines of this:
Obviously this isn’t from the admin, but the docs but you get the jist
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&amp;jsx=eJx1U01v1DAQvfdXPPm8bQqtxCXZA5WKkFAPwA[…]cExB0eBysWzCSWfqaj7TV6egrqaB%2Fft7gK2r6Uqsz%2FS7vz7rP9QQ7Qc%3D
And I would definitely recommend using
@sanity/ui
when developing for the Studio 👍
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&amp;jsx=eJx1U01v1DAQvfdXPPm8bQqtxCXZA5WKkFAPwA[…]cExB0eBysWzCSWfqaj7TV6egrqaB%2Fft7gK2r6Uqsz%2FS7vz7rP9QQ7Qc%3D
👍 Thanks for the help 😊

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?