Skip to Content
AuroraDesign System
Code Editor
Foundations
Color TokensTypographySpacing & RadiiBrand & MarkDirection
Controls
ButtonsButton GroupBadgesToggle SwitchToggleToggle GroupAvatarProgressSpinnerSeparatorToolbarKbd
Form Elements
Inputs & SelectsInputFieldLabelInput GroupInput OTPNative SelectSelectComboboxCheckbox & RadioRadio GroupSliderNumber InputTextareaCalendarDate PickerTabs & Pills
Feedback
AlertBannersCalloutToastsSonnerTooltipEmpty StatesSkeletonStatus IndicatorShimmerConfirmation
Navigation
BreadcrumbPaginationCommandNavigation MenuMenubar
Data
Stat CardsTablesData TableFilter BarsTimelineDescription ListSearch ResultsListboxMarketplace
Overlays
Modal & DialogAlert DialogAccordionCollapsibleDropdownsContext MenuPopoverHover CardSheetDrawerShare Dialog
Chat & AI
Prompt InputAI ElementsMessageConversationModel SelectorPersonaOpen in ChatReasoningTool CallsToolThinkingChain of ThoughtPlanTaskQueueSuggestionCode BlockArtifactTerminalPermission PromptAsk User QuestionPermissions ConfigCommand PaletteSidebar
Runtime & Execution
AgentCheckpointCommitContext PanelEnvironment VariablesPackage InfoSchema DisplaySandboxSnippetJSX PreviewStack TraceTest ResultsPanelControl StripCanvasConnectionEdgeNode
Media & Voice
Audio PlayerMic SelectorSpeech InputTranscriptionVoice Selector
Content
Attachment ChipAI AttachmentsSourcesInline CitationFile PickerFile TreeCode EditorCode WorkspaceWeb PreviewAspect RatioCardCarouselChartImageItemResizable PanelsScroll Area
Auth & Errors
LoginOAuth FlowError Pages
Themes
Light Mode
AI Elements (new)
ActionActionsAiImageGridBranchLoaderMessageAvatarMessageContentResponseSource
Aurora Extensions
ChatMessageChatSidebarColorPickerComponentCardCopyButtonMultiSelectOperationIconProgressRingRangeSliderRatingSegmentedSpotlightStatusDotStepperTagInput

Components

Code Editor

gateway.rsrust
1use axum::{
2 routing::{get, post},
3 Router, Json,
4};
5use serde::{Deserialize, Serialize};
6use std::sync::Arc;
7use tokio::net::TcpListener;
8
9#[derive(Debug, Serialize, Deserialize)]
10pub struct GatewayConfig {
11 pub host: String,
12 pub port: u16,
13 pub max_connections: usize,
14 pub tls_enabled: bool,
15}
16
17#[derive(Clone)]
18pub struct AppState {
19 config: Arc<GatewayConfig>,
20}
21
22async fn health_check() -> Json<serde_json::Value> {
23 Json(serde_json::json!({ "status": "ok", "version": "0.1.0" }))
24}
25
26async fn get_config(
27 axum::extract::State(state): axum::extract::State<AppState>,
28) -> Json<GatewayConfig> {
29 Json((*state.config).clone())
30}
31
32#[tokio::main]
33async fn main() -> anyhow::Result<()> {
34 let config = Arc::new(GatewayConfig {
35 host: "0.0.0.0".to_string(),
36 port: 8080,
37 max_connections: 1024,
38 tls_enabled: true,
39 });
40
41 let state = AppState { config };
42
43 let app = Router::new()
44 .route("/health", get(health_check))
45 .route("/config", get(get_config))
46 .with_state(state);
47
48 let listener = TcpListener::bind("0.0.0.0:8080").await?;
49 axum::serve(listener, app).await?;
50
51 Ok(())
52}
Ln 1, Col 1UTF-8rust
52 lines
Compact variant
config.tomltoml
1[gateway]
2host = "0.0.0.0"
3port = 8080
4tls_enabled = true
5max_connections = 1024

Display-only code editor panel with title bar (filename, language badge, close button), line numbers, syntax highlighting, minimap column, diff mode (add/remove line backgrounds), error diagnostics (squiggly underlines, gutter icons, error panel), status bar, and a compact variant.

Install

npx shadcn@latest add https://aurora.tootie.tv/r/aurora-code-editor.json
Requires@aurora/aurora-tokens@aurora/aurora-button@aurora/aurora-components
npmlucide-react