Component Library

Scraps is Sentry's design system, the Standardized Collection of Reusable Assets and Patterns for Sentry. It includes the core primitive React components, hooks, and design patterns that we use to build Sentry, maintained by the Design Engineering team. /stories also includes components and hooks for specific product verticals, maintained by the teams responsible for those product verticals.

Each story describes how to use a React component or hook, its public API, intended behavior, and common or recommended usage patterns.

Stories is a custom docs framework served under the /stories path inside the main Sentry app. It loads any .mdx and .stories.tsx files in the codebase.

  • Prod Access
    Log in and then visit /stories/ on your existing Sentry Organization. This works the same on sentry.io or for self-hosted installations.

  • Dev Access
    Whether you are using pnpm dev-ui to start a development server, or sentry devserver to spin up all the services locally, you can access Stories by logging in and changing the path from /issues/ (the default landing page) to /stories/.

For information on how to contribute to Stories, please see the Contributing section of the Stories documentation.

Stories for core components are owned by the Design Engineering team. Stories for general components are not nessicarily maintained by the original author or team of that component—if you are reading a story and notice a mistake or omission, consider it an opportunity to leave the docs in better shape than you found them!

The Design Engineering team is always available in the #discuss-design-engineering channel on Slack for questions or general feedback.

All code for the stories framework is built and maintained by Sentry's Design Engineering team. However, this tool is for all of us, so contributions are welcome! If you have ideas to improve the experience of discovering, reading, writing, or organizing stories, please share in the #discuss-design-engineering channel on Slack.

Previous
Using Styled Components
Next
Dependency Upgrade Policies
Was this helpful?
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").