How to import Sanity Alert component in custom component?
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 thread11 replies
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.