Display browser support status for web features based on the W3C WebDX Baseline specification.
Preview
Widely available since 2022
Newly available since 2024
Limited availability
No data
Browser Check
Use the browserCheck prop to show real-time browser support detection alongside the Baseline status.
// Combined Baseline status + real-time browser check
<BaselineStatus
featureId="view-transitions"
browserCheck="view-transitions"
/>
// Available browser checks:
// "view-transitions" - View Transitions API
// "popover" - Popover API
// "anchor-positioning" - CSS Anchor PositioningInstallation
Usage
import { BaselineStatus } from "@/components/ui/baseline-status"
// With static data
<BaselineStatus status="widely" year={2022} />
// With feature ID (fetches from API)
<BaselineStatus featureId="scroll-snap" />Examples
Size variants
sm:
Widely available since 2022
md:Widely available since 2022
lg:Widely available since 2022
<BaselineStatus status="widely" year={2022} size="sm" />
<BaselineStatus status="widely" year={2022} size="md" />
<BaselineStatus status="widely" year={2022} size="lg" />Icon only
<BaselineStatus status="widely" iconOnly />
<BaselineStatus status="newly" iconOnly />
<BaselineStatus status="limited" iconOnly />
<BaselineStatus status="no_data" iconOnly />Without year
Widely available
<BaselineStatus status="widely" showYear={false} />With Feature ID (API)
// Fetches data from webstatus.dev API
<BaselineStatus featureId="scroll-snap" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| featureId | string | - | Feature ID from web-features (e.g., "scroll-snap") |
| status | "widely" | "newly" | "limited" | "no_data" | - | Direct status override (static data) |
| year | number | - | Year when feature became available |
| size | "sm" | "md" | "lg" | "md" | Size variant |
| showYear | boolean | true | Show year in the label |
| iconOnly | boolean | false | Show only the icon without text |
| browserCheck | "view-transitions" | "popover" | "anchor-positioning" | - | Browser feature to detect support for. Shows real-time support status alongside Baseline. |
Common Feature IDs
Feature IDs can be found at web-features repository.
| Feature | ID |
|---|---|
| CSS Scroll Snap | scroll-snap |
| Container Queries | container-queries |
| CSS Grid | css-grid |
| Anchor Positioning | anchor-positioning |
| View Transitions | view-transitions |
| Popover API | popover |