ProjectOverview
BlocksSummarize a project with metrics, navigation cards, charts, tables, code snippets, and dashboard management.
Read and copy code snippets with line numbers, a focusable scroll region, and syntaxTheme styling.
bun add @reopt-ai/opt-uiimport { CodeSnippetViewer } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
1import { track } from "@reopt-ai/analytics";23// Track a page view event4track("page_view", {5 path: window.location.pathname,6 referrer: document.referrer,7 title: document.title,8});1import { track } from "@reopt-ai/analytics";23// Track a page view event4track("page_view", {5 path: window.location.pathname,6 referrer: document.referrer,7 title: document.title,8});910const longLine = "가로 스크롤과 키보드 포커스를 확인하기 위한 매우 긴 코드 줄입니다.".repeat(4);Summarize a project with metrics, navigation cards, charts, tables, code snippets, and dashboard management.
Manage project settings, retention policies, cleanup previews, and storage usage with forms, tables, and code snippets.
Build a rich-text editing toolbar from Toolbar and Tooltip components.
Edit SQL with CodeMirror syntax highlighting and autocomplete.
Edit Markdown with a formatting toolbar and textarea.
Compare code in unified or split views using an LCS diff and focusable scroll regions.
Organize FAQ questions and answers with Composite and Disclosure components.
Add a sticky, fixed-width page aside with header, body, and footer slots.