Edit src/templates/${slug}/template.tsx to build this composition. {templates.length} templates are available.
\nServer-rendered regular Scraps quotation.+ ) : ( +
+ Server-rendered regular Scraps quotation. ++ )} +
- Drop in Sentry's purple-tinted neutrals, Blurple accent, - and Rubik typography. One install gives you the complete theme - for both light and dark modes. -
-npx shadcn add https://scrapscn.sentry.dev/r
- - Everything maps to standard shadcn tokens. Your components - just work. -
-- Light + dark mode CSS variables, including Sentry-specific - warning, success, and promotion -
-- All standard shadcn components, pre-themed with - Sentry's color system -
-- Dammit Sans (headlines), Rubik (body), Roboto Mono (code) -
-- One CLI command. Theme swaps in, components just work. -
-- Purple-tinted neutrals in both directions. Dark mode - isn't an afterthought — it's where Sentry - lives. -
-- These look like Sentry because they use Sentry's tokens. - Not custom CSS — just the theme doing its job. -
-- - +12% - {" "} - from last week -
-- +0.3%{" "} - since last release -
-- Across 12 projects -
-
- {tx.route}
-
- - The default Button has Sentry's raised - “embossed” depth effect. Hover to lift, - click to press. Uses the snap easing curve at 160ms. -
-- Let Seer suggest fixes for new issues -
-- Track transaction performance and web vitals -
-- Record user sessions for error reproduction -
-- Composed layouts built entirely from themed shadcn components. - No custom CSS — just the tokens doing their job. -
-- TypeError: Cannot read properties of undefined (reading - 'map') -
-- at UserList{" "} - - (./src/components/UserList.tsx:42:18) - -
-- at renderWithHooks (react-dom.js:14985:18) -
-- at mountIndeterminateComponent - (react-dom.js:17811:13) -
-- at beginWork (react-dom.js:19049:16) -
-- The signature gradient -
-- Deep purple canvas with vivid mesh washes and dot - texture. This is what “Sentry” looks like. -
-- CSS fallback -
-- When the texture isn't available: Black → Violet → - Blurple → Orchid at 135°. -
-- Blurple is the star. We use a dark shade of purple rather than - straight #000 black — it makes everything feel warmer and more - intentional. -
-- Dammit Sans for headlines. Rubik for everything else. Roboto - Mono for code. Always sentence case. -
-- font-heading · Dammit Sans -
-- Fix your bugs before your users find them -
-- font-sans · Rubik 400 -
-- Sentry helps developers ship with confidence. Real-time - error tracking, performance monitoring, and session replay - give you the context you need to fix what's broken — - fast. -
-- font-sans · Rubik 500 -
-- Subheads use medium weight to create hierarchy without - shouting. -
-- font-mono · Roboto Mono -
-- TypeError: Cannot read properties of undefined -
-- {` at UserList (./src/components/UserList.tsx:42:18)`} -
-- {` at renderWithHooks (react-dom.js:14985:18)`} -
-- {` at mountIndeterminateComponent (react-dom.js:17811:13)`} -
-- Sentence case always. Capitalize only the - first word and proper nouns. -
-- ✓ Welcome to Sentry -
-- ✗ Welcome To Sentry -
-- ✓ Set up your first project -
-- ✗ Set Up Your First Project -
-- Sentry sounds like a veteran on the dev team who's seen - some stuff but keeps it approachable. Not corporate. Not trying - to sell you something. -
-{v.desc}
-- Sentry uses three speed tiers and five easing curves. Every - transition should feel intentional — slow for storytelling, - snappy for hype. -
-
- {tier.ms}
-
- - {tier.desc} -
-- One command to install the base theme into any shadcn project. -
-1. Install the theme
-npx shadcn add https://scrapscn.sentry.dev/r/sentry-base
- - 2. Wrap your app with the theme provider -
-{`import { ThemeProvider } from "@/components/theme-provider"
-
-
- {children}
- `}
- 3. Use components
-- All shadcn components automatically pick up the Sentry - theme. No custom CSS needed. -
-{session.description}
+ {session.preview} +Page content
, + title: "Notification Settings", + }, +} satisfies Meta+ {breadcrumbs.map((breadcrumb, index) => ( + + {index > 0 ? " / " : null} + {breadcrumb} + + ))} +
+ ) : null} +Changes stay in the share URL.
+Changes stay in the share URL.
+ Changes stay in the share URL. +
+
+ Inspect{" "}
+
Changes stay in the share URL.
Changes stay in the share URL.
Changes stay in the share URL.
++ Changes stay in the share URL. +
+The URL stores every control.
+The URL stores every control.
Changes remain in the share URL.
+{state.body}
+ Changes stay in the share URL. +
++ Every setup value is in the share URL. +
+Changes stay in the share URL.
+ Changes stay in the share URL. +
+Resize, sort, and share a realistic issue table.
Changes stay in the share URL.
+
+ Raw prose applies inline code and ⌘K without
+ component wrappers.
+
preformatted code is not restyled as inline code
+ The URL stores every control.
+
+
+ {children}
+
+
+
+ Run
+ );
+}
diff --git a/src/components/ui/container-query-context.ts b/src/components/ui/container-query-context.ts
new file mode 100644
index 0000000..b832b77
--- /dev/null
+++ b/src/components/ui/container-query-context.ts
@@ -0,0 +1,21 @@
+"use client";
+
+import { createContext } from "react";
+
+export type ContainerQueryBreakpoint =
+ | "zero"
+ | "3xs"
+ | "2xs"
+ | "xs"
+ | "sm"
+ | "md"
+ | "lg"
+ | "xl"
+ | "2xl"
+ | "3xl"
+ | "4xl"
+ | "5xl";
+
+/** Shares the nearest layout query-container breakpoint with logical descendants. */
+export const ContainerQueryContext =
+ createContext