diff --git a/Cargo.toml b/Cargo.toml
index e4f729db..1e76869b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5,15 +5,17 @@ default-members = ["crates/story"]
 resolver = "2"
 
 [workspace.dependencies]
-anyhow = "1"
+gpui-component = { path = "crates/ui" }
+story = { path = "crates/story" }
+
 gpui = { git = "https://github.com/huacnlee/zed.git", branch = "webview" }
+
+anyhow = "1"
 log = "0.4"
+rust-embed = "8.5.0"
 serde = "1.0.203"
 serde_json = "1"
 smallvec = "1"
-rust-embed = "8.5.0"
-story = { path = "crates/story" }
-ui = { package = "gpui-component", path = "crates/ui" }
 windows = { version = "0.58.0", features = [
     "Wdk",
     "Wdk_System",
diff --git a/README.md b/README.md
index 1feba863..d1b7b3b0 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ And GPUI Component depends on `gpui` by special version (It keep updated to upst
 
 ```toml
 gpui = { git = "https://github.com/huacnlee/zed.git", branch = "export-platform-window" }
-ui = { git = "https://github.com/longbridge/gpui-component.git" }
+gpui-component = { git = "https://github.com/longbridge/gpui-component.git" }
 ```
 
 More usage can be found in [story](https://github.com/longbridge/gpui-component/tree/main/crates/story) directory.
diff --git a/crates/story/Cargo.toml b/crates/story/Cargo.toml
index 0e2bbe14..fc4da2bb 100644
--- a/crates/story/Cargo.toml
+++ b/crates/story/Cargo.toml
@@ -1,22 +1,22 @@
 [package]
-name = "story"
-version = "0.1.0"
 edition = "2021"
+name = "story"
 publish = false
+version = "0.1.0"
 
 [dependencies]
-ui.workspace = true
-gpui.workspace = true
-fake = { version = "2.10.0", features = ["dummy"] }
+anyhow.workspace = true
 charts-rs = "0.3"
-regex = "1"
 chrono = "0.4"
+fake = { version = "2.10.0", features = ["dummy"] }
+gpui.workspace = true
+gpui-component.workspace = true
+rand = "0.8"
+regex = "1"
+rust-embed.workspace = true
 serde = "1"
 serde_json = "1"
 unindent = "0.2.3"
-anyhow.workspace = true
-rust-embed.workspace = true
-rand = "0.8"
 
 [lints]
 workspace = true
diff --git a/crates/story/src/accordion_story.rs b/crates/story/src/accordion_story.rs
index 697b5291..c43fa0d0 100644
--- a/crates/story/src/accordion_story.rs
+++ b/crates/story/src/accordion_story.rs
@@ -2,7 +2,7 @@ use gpui::{
     App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement as _,
     Render, Styled as _, Window,
 };
-use ui::{
+use gpui_component::{
     accordion::Accordion,
     button::{Button, ButtonGroup},
     checkbox::Checkbox,
diff --git a/crates/story/src/button_story.rs b/crates/story/src/button_story.rs
index 682932c2..bc489b62 100644
--- a/crates/story/src/button_story.rs
+++ b/crates/story/src/button_story.rs
@@ -3,11 +3,12 @@ use gpui::{
     Focusable, InteractiveElement, IntoElement, ParentElement as _, Render, Styled as _, Window,
 };
 
-use ui::{
+use gpui_component::{
+    black,
     button::{Button, ButtonCustomVariant, ButtonGroup, ButtonVariants as _, DropdownButton},
     checkbox::Checkbox,
-    h_flex, v_flex, ActiveTheme, Disableable as _, Icon, IconName, Selectable as _, Sizable as _,
-    Theme,
+    green_500, green_600, green_800, green_900, green_950, h_flex, v_flex, white, ActiveTheme,
+    Disableable as _, Icon, IconName, Selectable as _, Sizable as _, Theme,
 };
 
 use crate::section;
@@ -209,29 +210,29 @@ impl Render for ButtonStory {
                                     .custom(
                                         ButtonCustomVariant::new(cx)
                                             .color(if cx.theme().mode.is_dark() {
-                                                ui::green_900()
+                                                green_900()
                                             } else {
-                                                ui::green_500()
+                                                green_500()
                                             })
                                             .foreground(if cx.theme().mode.is_dark() {
-                                                ui::white()
+                                                white()
                                             } else {
-                                                ui::black()
+                                                black()
                                             })
                                             .border(if cx.theme().mode.is_dark() {
-                                                ui::green_800()
+                                                green_800()
                                             } else {
-                                                ui::green_600()
+                                                green_600()
                                             })
                                             .hover(if cx.theme().mode.is_dark() {
-                                                ui::green_800()
+                                                green_800()
                                             } else {
-                                                ui::green_500()
+                                                green_500()
                                             })
                                             .active(if cx.theme().mode.is_dark() {
-                                                ui::green_950()
+                                                green_950()
                                             } else {
-                                                ui::green_600()
+                                                green_600()
                                             }),
                                     )
                                     .label("Custom Button")
diff --git a/crates/story/src/calendar_story.rs b/crates/story/src/calendar_story.rs
index 70e0ecb6..e61453b9 100644
--- a/crates/story/src/calendar_story.rs
+++ b/crates/story/src/calendar_story.rs
@@ -3,7 +3,7 @@ use gpui::{
     px, App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement as _, Render,
     Styled as _, Window,
 };
-use ui::{
+use gpui_component::{
     button::Button,
     date_picker::{DatePicker, DatePickerEvent, DateRangePreset},
     v_flex, Sizable as _, Size,
diff --git a/crates/story/src/dropdown_story.rs b/crates/story/src/dropdown_story.rs
index abcd254f..16bf632e 100644
--- a/crates/story/src/dropdown_story.rs
+++ b/crates/story/src/dropdown_story.rs
@@ -3,7 +3,7 @@ use gpui::{
     KeyBinding, ParentElement, Render, SharedString, Styled, Window,
 };
 
-use ui::{
+use gpui_component::{
     checkbox::Checkbox,
     dropdown::{Dropdown, DropdownEvent, DropdownItem, SearchableVec},
     h_flex, v_flex, ActiveTheme, FocusableCycle, IconName, Sizable,
diff --git a/crates/story/src/form_story.rs b/crates/story/src/form_story.rs
index 2b559016..6f6cb689 100644
--- a/crates/story/src/form_story.rs
+++ b/crates/story/src/form_story.rs
@@ -2,7 +2,7 @@ use gpui::{
     actions, div, prelude::FluentBuilder as _, App, AppContext, Axis, Context, Entity, Focusable,
     InteractiveElement, IntoElement, ParentElement as _, Render, Styled, Window,
 };
-use ui::{
+use gpui_component::{
     button::{Button, ButtonGroup},
     checkbox::Checkbox,
     date_picker::DatePicker,
diff --git a/crates/story/src/icon_story.rs b/crates/story/src/icon_story.rs
index 3a3adc8c..57cec11b 100644
--- a/crates/story/src/icon_story.rs
+++ b/crates/story/src/icon_story.rs
@@ -2,10 +2,10 @@ use gpui::{
     px, rems, App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement,
     Render, Styled, Window,
 };
-use ui::{
+use gpui_component::{
     button::{Button, ButtonVariant, ButtonVariants},
     dock::PanelControl,
-    h_flex, v_flex, ActiveTheme as _, Icon, IconName,
+    gray_500, green_500, h_flex, red_500, v_flex, ActiveTheme as _, Icon, IconName,
 };
 
 pub struct IconStory {
@@ -53,25 +53,17 @@ impl Render for IconStory {
                 .child(
                     Icon::new(IconName::Maximize)
                         .size_6()
-                        .text_color(ui::green_500()),
+                        .text_color(green_500()),
                 )
                 .child(Icon::new(IconName::Maximize).size(px(55.)))
                 .child(
                     Button::new("like1")
-                        .icon(
-                            Icon::new(IconName::Heart)
-                                .text_color(ui::gray_500())
-                                .size_6(),
-                        )
+                        .icon(Icon::new(IconName::Heart).text_color(gray_500()).size_6())
                         .with_variant(ButtonVariant::Ghost),
                 )
                 .child(
                     Button::new("like2")
-                        .icon(
-                            Icon::new(IconName::HeartOff)
-                                .text_color(ui::red_500())
-                                .size_6(),
-                        )
+                        .icon(Icon::new(IconName::HeartOff).text_color(red_500()).size_6())
                         .with_variant(ButtonVariant::Ghost),
                 )
                 .child(
diff --git a/crates/story/src/image_story.rs b/crates/story/src/image_story.rs
index 9e399d74..03966222 100644
--- a/crates/story/src/image_story.rs
+++ b/crates/story/src/image_story.rs
@@ -1,7 +1,7 @@
 use gpui::{
     px, App, AppContext, Entity, FocusHandle, Focusable, ParentElement as _, Render, Styled, Window,
 };
-use ui::{dock::PanelControl, h_flex, v_flex, SvgImg};
+use gpui_component::{dock::PanelControl, h_flex, v_flex, SvgImg};
 
 const GOOGLE_LOGO: &str = include_str!("./fixtures/google.svg");
 const PIE_JSON: &str = include_str!("./fixtures/pie.json");
diff --git a/crates/story/src/input_story.rs b/crates/story/src/input_story.rs
index 985c8555..f13a5f7a 100644
--- a/crates/story/src/input_story.rs
+++ b/crates/story/src/input_story.rs
@@ -6,11 +6,11 @@ use gpui::{
 use regex::Regex;
 
 use crate::section;
-use ui::{
+use gpui_component::{
     button::{Button, ButtonVariant, ButtonVariants as _},
     checkbox::Checkbox,
     h_flex,
-    input::{InputEvent, NumberInput, NumberInputEvent, OtpInput, TextInput},
+    input::{InputEvent, NumberInput, NumberInputEvent, OtpInput, StepAction, TextInput},
     v_flex, FocusableCycle, IconName, Sizable,
 };
 
@@ -269,13 +269,13 @@ impl InputStory {
                 InputEvent::Blur => println!("Blur"),
             },
             NumberInputEvent::Step(step_action) => match step_action {
-                ui::input::StepAction::Decrement => {
+                StepAction::Decrement => {
                     self.number_input1_value = self.number_input1_value - 1;
                     self.number_input1.update(cx, |input, cx| {
                         input.set_value(self.number_input1_value.to_string(), window, cx);
                     });
                 }
-                ui::input::StepAction::Increment => {
+                StepAction::Increment => {
                     self.number_input1_value = self.number_input1_value + 1;
                     self.number_input1.update(cx, |input, cx| {
                         input.set_value(self.number_input1_value.to_string(), window, cx);
@@ -300,7 +300,7 @@ impl InputStory {
                 InputEvent::Blur => println!("Blur"),
             },
             NumberInputEvent::Step(step_action) => match step_action {
-                ui::input::StepAction::Decrement => {
+                StepAction::Decrement => {
                     if self.number_input2_value.le(&0) {
                         return;
                     }
@@ -310,7 +310,7 @@ impl InputStory {
                         input.set_value(self.number_input2_value.to_string(), window, cx);
                     });
                 }
-                ui::input::StepAction::Increment => {
+                StepAction::Increment => {
                     self.number_input2_value = self.number_input2_value + 1;
                     self.number_input2.update(cx, |input, cx| {
                         input.set_value(self.number_input2_value.to_string(), window, cx);
diff --git a/crates/story/src/lib.rs b/crates/story/src/lib.rs
index 1ad022f3..6d13d677 100644
--- a/crates/story/src/lib.rs
+++ b/crates/story/src/lib.rs
@@ -53,7 +53,7 @@ pub use title_bar::AppTitleBar;
 pub use tooltip_story::TooltipStory;
 pub use webview_story::WebViewStory;
 
-use ui::{
+use gpui_component::{
     button::Button,
     divider::Divider,
     dock::{register_panel, Panel, PanelControl, PanelEvent, PanelInfo, PanelState, TitleStyle},
@@ -188,7 +188,7 @@ impl Render for StoryRoot {
 impl Global for AppState {}
 
 pub fn init(cx: &mut App) {
-    ui::init(cx);
+    gpui_component::init(cx);
     AppState::init(cx);
     input_story::init(cx);
     dropdown_story::init(cx);
@@ -229,7 +229,7 @@ pub fn init(cx: &mut App) {
 actions!(story, [ShowPanelInfo]);
 
 pub fn section(title: impl IntoElement, cx: &App) -> Div {
-    use ui::ActiveTheme;
+    use gpui_component::ActiveTheme;
     let theme = cx.theme();
 
     h_flex()
diff --git a/crates/story/src/list_story.rs b/crates/story/src/list_story.rs
index beb75277..5f91baf1 100644
--- a/crates/story/src/list_story.rs
+++ b/crates/story/src/list_story.rs
@@ -8,7 +8,7 @@ use gpui::{
     Subscription, Task, Timer, Window,
 };
 
-use ui::{
+use gpui_component::{
     button::Button,
     checkbox::Checkbox,
     h_flex, hsl,
diff --git a/crates/story/src/main.rs b/crates/story/src/main.rs
index 537da2a1..20a781cb 100644
--- a/crates/story/src/main.rs
+++ b/crates/story/src/main.rs
@@ -1,5 +1,11 @@
 use anyhow::{Context as _, Result};
 use gpui::*;
+use gpui_component::{
+    button::{Button, ButtonVariants as _},
+    dock::{DockArea, DockAreaState, DockEvent, DockItem, DockPlacement},
+    popup_menu::PopupMenuExt,
+    IconName, Root, Sizable, Theme, TitleBar,
+};
 use serde::Deserialize;
 use std::{sync::Arc, time::Duration};
 use story::{
@@ -8,12 +14,6 @@ use story::{
     ProgressStory, Quit, ResizableStory, ScrollableStory, SidebarStory, StoryContainer,
     SwitchStory, TableStory, TextStory, TooltipStory,
 };
-use ui::{
-    button::{Button, ButtonVariants as _},
-    dock::{DockArea, DockAreaState, DockEvent, DockItem, DockPlacement},
-    popup_menu::PopupMenuExt,
-    IconName, Root, Sizable, Theme, TitleBar,
-};
 
 #[derive(Clone, PartialEq, Eq, Deserialize)]
 pub struct AddPanel(DockPlacement);
@@ -33,7 +33,7 @@ pub fn init(cx: &mut App) {
 
     cx.on_action(|_action: &Open, _cx: &mut App| {});
 
-    ui::init(cx);
+    gpui_component::init(cx);
     story::init(cx);
 }
 
@@ -506,7 +506,7 @@ impl Render for StoryWorkspace {
 }
 
 fn main() {
-    use ui::input::{Copy, Cut, Paste, Redo, Undo};
+    use gpui_component::input::{Copy, Cut, Paste, Redo, Undo};
 
     let app = Application::new().with_assets(Assets);
 
diff --git a/crates/story/src/modal_story.rs b/crates/story/src/modal_story.rs
index 98b4c90c..789417bd 100644
--- a/crates/story/src/modal_story.rs
+++ b/crates/story/src/modal_story.rs
@@ -7,7 +7,7 @@ use gpui::{
     Task, Timer, WeakEntity, Window,
 };
 
-use ui::{
+use gpui_component::{
     button::{Button, ButtonVariant, ButtonVariants as _},
     checkbox::Checkbox,
     date_picker::DatePicker,
@@ -19,7 +19,7 @@ use ui::{
     notification::{Notification, NotificationType},
     v_flex,
     webview::WebView,
-    ActiveTheme as _, ContextModal as _, Icon, IconName, Placement,
+    wry, ActiveTheme as _, ContextModal as _, Icon, IconName, Placement,
 };
 
 actions!(modal_story, [TestAction]);
@@ -76,7 +76,7 @@ impl ListDelegate for ListItemDeletegate {
 
         if let Some(item) = self.matches.get(ix) {
             let list_item = ListItem::new(("item", ix))
-                .check_icon(ui::IconName::Check)
+                .check_icon(IconName::Check)
                 .confirmed(confirmed)
                 .selected(selected)
                 .py_1()
@@ -523,7 +523,7 @@ impl Render for ModalStory {
                             .child(Button::new("webview").label("Open WebView").on_click(
                                 cx.listener(|_, _, window, cx| {
                                     let webview = cx.new(|cx| {
-                                        let webview = ui::wry::WebViewBuilder::new()
+                                        let webview = wry::WebViewBuilder::new()
                                             .build_as_child(&window.raw_window_handle())
                                             .unwrap();
 
diff --git a/crates/story/src/popup_story.rs b/crates/story/src/popup_story.rs
index 115c0e7e..ec9052b2 100644
--- a/crates/story/src/popup_story.rs
+++ b/crates/story/src/popup_story.rs
@@ -3,8 +3,7 @@ use gpui::{
     Element, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement, IntoElement,
     KeyBinding, MouseButton, ParentElement as _, Render, SharedString, Styled as _, Window,
 };
-use serde::Deserialize;
-use ui::{
+use gpui_component::{
     button::{Button, ButtonVariants as _},
     context_menu::ContextMenuExt,
     divider::Divider,
@@ -15,6 +14,7 @@ use ui::{
     switch::Switch,
     v_flex, ActiveTheme as _, ContextModal, IconName, Sizable,
 };
+use serde::Deserialize;
 
 #[derive(Clone, PartialEq, Deserialize)]
 struct Info(usize);
diff --git a/crates/story/src/progress_story.rs b/crates/story/src/progress_story.rs
index 6d85bbe4..4295e3a5 100644
--- a/crates/story/src/progress_story.rs
+++ b/crates/story/src/progress_story.rs
@@ -2,11 +2,12 @@ use gpui::{
     div, hsla, px, App, AppContext, Context, Entity, Focusable, Hsla, IntoElement, ParentElement,
     Render, SharedString, Styled, Subscription, Window,
 };
-use ui::{
+use gpui_component::{
+    blue_500,
     button::Button,
     clipboard::Clipboard,
     divider::Divider,
-    h_flex,
+    gray_300, h_flex,
     indicator::Indicator,
     progress::Progress,
     skeleton::Skeleton,
@@ -204,7 +205,7 @@ impl Render for ProgressStory {
                         Indicator::new()
                             .large()
                             .icon(IconName::LoaderCircle)
-                            .color(ui::blue_500()),
+                            .color(blue_500()),
                     )
                     .child(Indicator::new().with_size(px(64.))),
             )
@@ -212,7 +213,7 @@ impl Render for ProgressStory {
                 Divider::horizontal()
                     .mt_10()
                     .label("Slider")
-                    .color(ui::gray_300()),
+                    .color(gray_300()),
             )
             .child(self.slider1.clone())
             .child(format!("Slider 1: {}", self.slider1_value))
diff --git a/crates/story/src/resizable_story.rs b/crates/story/src/resizable_story.rs
index 6ba34ecc..644524c1 100644
--- a/crates/story/src/resizable_story.rs
+++ b/crates/story/src/resizable_story.rs
@@ -2,10 +2,9 @@ use gpui::{
     div, px, AnyElement, App, AppContext, Context, Entity, Focusable, IntoElement,
     ParentElement as _, Render, SharedString, Styled, Window,
 };
-use ui::ActiveTheme;
-use ui::{
+use gpui_component::{
     resizable::{h_resizable, resizable_panel, v_resizable, ResizablePanelGroup},
-    v_flex,
+    v_flex, ActiveTheme,
 };
 
 pub struct ResizableStory {
diff --git a/crates/story/src/scrollable_story.rs b/crates/story/src/scrollable_story.rs
index 15882bc2..9bc93dc9 100644
--- a/crates/story/src/scrollable_story.rs
+++ b/crates/story/src/scrollable_story.rs
@@ -5,12 +5,14 @@ use gpui::{
     div, px, size, App, AppContext, Context, Entity, Focusable, InteractiveElement, IntoElement,
     ParentElement, Pixels, Render, ScrollHandle, SharedString, Size, Styled, Window,
 };
-use ui::button::Button;
-use ui::divider::Divider;
-use ui::label::Label;
-use ui::scroll::{Scrollbar, ScrollbarAxis, ScrollbarState};
-use ui::ActiveTheme;
-use ui::{h_flex, v_flex, v_virtual_list, StyledExt as _};
+use gpui_component::{
+    button::Button,
+    divider::Divider,
+    gray_100, gray_800, h_flex,
+    label::Label,
+    scroll::{Scrollbar, ScrollbarAxis, ScrollbarState},
+    v_flex, v_virtual_list, ActiveTheme as _, StyledExt as _,
+};
 
 pub struct ScrollableStory {
     focus_handle: gpui::FocusHandle,
@@ -212,9 +214,9 @@ impl Render for ScrollableStory {
                                                                     .bg(
                                                                         if cx.theme().mode.is_dark()
                                                                         {
-                                                                            ui::gray_800()
+                                                                            gray_800()
                                                                         } else {
-                                                                            ui::gray_100()
+                                                                            gray_100()
                                                                         },
                                                                     )
                                                                     .child(if i == 0 {
diff --git a/crates/story/src/sidebar_story.rs b/crates/story/src/sidebar_story.rs
index 81c38cc2..0d1ec7c4 100644
--- a/crates/story/src/sidebar_story.rs
+++ b/crates/story/src/sidebar_story.rs
@@ -3,8 +3,8 @@ use gpui::{
     Context, Entity, Focusable, ParentElement, Render, SharedString, Styled, Window,
 };
 
-use serde::Deserialize;
-use ui::{
+use gpui_component::{
+    blue_500,
     breadcrumb::{Breadcrumb, BreadcrumbItem},
     divider::Divider,
     h_flex,
@@ -12,8 +12,9 @@ use ui::{
     sidebar::{
         Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarMenu, SidebarToggleButton,
     },
-    v_flex, ActiveTheme, Collapsible, Icon, IconName,
+    v_flex, white, ActiveTheme, Collapsible, Icon, IconName,
 };
+use serde::Deserialize;
 
 #[derive(Clone, PartialEq, Eq, Deserialize)]
 pub struct SelectCompany(SharedString);
@@ -216,8 +217,8 @@ impl Render for SidebarStory {
                                     .items_center()
                                     .justify_center()
                                     .rounded(cx.theme().radius)
-                                    .bg(ui::blue_500())
-                                    .text_color(ui::white())
+                                    .bg(blue_500())
+                                    .text_color(white())
                                     .size_8()
                                     .flex_shrink_0()
                                     .child(Icon::new(IconName::GalleryVerticalEnd).size_4())
diff --git a/crates/story/src/switch_story.rs b/crates/story/src/switch_story.rs
index 5df46f96..2842676a 100644
--- a/crates/story/src/switch_story.rs
+++ b/crates/story/src/switch_story.rs
@@ -3,7 +3,7 @@ use gpui::{
     SharedString, Styled, Window,
 };
 
-use ui::{
+use gpui_component::{
     checkbox::Checkbox,
     h_flex,
     label::Label,
diff --git a/crates/story/src/table_story.rs b/crates/story/src/table_story.rs
index d8ef8780..ebdf48b7 100644
--- a/crates/story/src/table_story.rs
+++ b/crates/story/src/table_story.rs
@@ -9,18 +9,19 @@ use gpui::{
     Context, Edges, Entity, Focusable, InteractiveElement, IntoElement, ParentElement, Pixels,
     Render, SharedString, Styled, Timer, Window,
 };
-use serde::Deserialize;
-use ui::{
+use gpui_component::{
     button::Button,
     checkbox::Checkbox,
-    h_flex,
+    green, h_flex,
     indicator::Indicator,
     input::{InputEvent, TextInput},
     label::Label,
     popup_menu::{PopupMenu, PopupMenuExt},
-    table::{ColFixed, ColSort, Table, TableDelegate, TableEvent},
+    red,
+    table::{self, ColFixed, ColSort, Table, TableDelegate, TableEvent},
     v_flex, ActiveTheme as _, Selectable, Sizable as _, Size, StyleSized as _,
 };
+use serde::Deserialize;
 
 #[derive(Clone, PartialEq, Eq, Deserialize)]
 struct ChangeSize(Size);
@@ -274,11 +275,11 @@ impl StockTableDelegate {
         let right_num = ((val - val.floor()) * 1000.).floor() as i32;
 
         let this = if right_num % 3 == 0 {
-            this.text_color(ui::red(fg_scale))
-                .bg(ui::red(bg_scale).opacity(opacity))
+            this.text_color(red(fg_scale))
+                .bg(red(bg_scale).opacity(opacity))
         } else if right_num % 3 == 1 {
-            this.text_color(ui::green(fg_scale))
-                .bg(ui::green(bg_scale).opacity(opacity))
+            this.text_color(green(fg_scale))
+                .bg(green(bg_scale).opacity(opacity))
         } else {
             this
         };
@@ -322,7 +323,7 @@ impl TableDelegate for StockTableDelegate {
         }
     }
 
-    fn col_fixed(&self, col_ix: usize, _: &App) -> Option<ui::table::ColFixed> {
+    fn col_fixed(&self, col_ix: usize, _: &App) -> Option<table::ColFixed> {
         if !self.fixed_cols {
             return None;
         }
diff --git a/crates/story/src/text_story.rs b/crates/story/src/text_story.rs
index 22e132e4..cb3f4fd2 100644
--- a/crates/story/src/text_story.rs
+++ b/crates/story/src/text_story.rs
@@ -3,14 +3,15 @@ use gpui::{
     SharedString, Styled, Window,
 };
 
-use ui::{
+use gpui_component::{
     button::{Button, ButtonVariant, ButtonVariants as _},
     clipboard::Clipboard,
     h_flex,
     label::Label,
     link::Link,
+    red_500,
     tag::Tag,
-    v_flex, IconName, Sizable, StyledExt,
+    v_flex, yellow_500, yellow_800, IconName, Sizable, StyledExt,
 };
 
 use crate::section;
@@ -71,7 +72,7 @@ impl Render for TextStory {
                             .child(Label::new("Text align center").text_center())
                             .child(Label::new("Text align right").text_right()),
                     )
-                    .child(Label::new("Color Label").text_color(ui::red_500()))
+                    .child(Label::new("Color Label").text_color(red_500()))
                     .child(
                         Label::new("Font Size Label")
                             .text_size(px(20.))
@@ -104,8 +105,8 @@ impl Render for TextStory {
                                 .child(
                                     Link::new("link2")
                                         .href("https://github.com")
-                                        .text_color(ui::red_500())
-                                        .text_decoration_color(ui::red_500())
+                                        .text_color(red_500())
+                                        .text_decoration_color(red_500())
                                         .child("Red Link"),
                                 )
                                 .child(
@@ -199,7 +200,7 @@ impl Render for TextStory {
                             .child(Tag::outline().small().child("Outline"))
                             .child(Tag::danger().small().child("danger"))
                             .child(
-                                Tag::custom(ui::yellow_500(), ui::yellow_800(), ui::yellow_500())
+                                Tag::custom(yellow_500(), yellow_800(), yellow_500())
                                     .small()
                                     .child("Custom"),
                             ),
@@ -212,7 +213,7 @@ impl Render for TextStory {
                             .child(Tag::outline().child("Outline"))
                             .child(Tag::danger().child("danger"))
                             .child(
-                                Tag::custom(ui::yellow_500(), ui::yellow_800(), ui::yellow_500())
+                                Tag::custom(yellow_500(), yellow_800(), yellow_500())
                                     .child("Custom"),
                             ),
                     ),
diff --git a/crates/story/src/title_bar.rs b/crates/story/src/title_bar.rs
index eb45451d..3e5ba106 100644
--- a/crates/story/src/title_bar.rs
+++ b/crates/story/src/title_bar.rs
@@ -5,13 +5,15 @@ use gpui::{
     Entity, FocusHandle, Hsla, InteractiveElement as _, IntoElement, MouseButton,
     ParentElement as _, Render, SharedString, Styled as _, Subscription, Window,
 };
-use ui::{
+use gpui_component::{
     badge::Badge,
     button::{Button, ButtonVariants as _},
     color_picker::{ColorPicker, ColorPickerEvent},
+    locale,
     popup_menu::PopupMenuExt as _,
     scroll::ScrollbarShow,
-    ActiveTheme as _, ContextModal as _, IconName, Sizable as _, Theme, TitleBar,
+    set_locale, ActiveTheme as _, ContextModal as _, IconName, Sizable as _, Theme, ThemeMode,
+    TitleBar,
 };
 
 use crate::{SelectFont, SelectLocale, SelectRadius, SelectScrollbarShow};
@@ -90,8 +92,8 @@ impl AppTitleBar {
 
     fn change_color_mode(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context<Self>) {
         let mode = match cx.theme().mode.is_dark() {
-            true => ui::ThemeMode::Light,
-            false => ui::ThemeMode::Dark,
+            true => ThemeMode::Light,
+            false => ThemeMode::Dark,
         };
 
         Theme::change(mode, None, cx);
@@ -174,7 +176,7 @@ impl LocaleSelector {
         window: &mut Window,
         _: &mut Context<Self>,
     ) {
-        ui::set_locale(&locale.0);
+        set_locale(&locale.0);
         window.refresh();
     }
 }
@@ -182,7 +184,7 @@ impl LocaleSelector {
 impl Render for LocaleSelector {
     fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let focus_handle = self.focus_handle.clone();
-        let locale = ui::locale().to_string();
+        let locale = locale().to_string();
 
         div()
             .id("locale-selector")
diff --git a/crates/story/src/tooltip_story.rs b/crates/story/src/tooltip_story.rs
index 7183f64f..c2333ac9 100644
--- a/crates/story/src/tooltip_story.rs
+++ b/crates/story/src/tooltip_story.rs
@@ -3,7 +3,7 @@ use gpui::{
     ParentElement, Render, StatefulInteractiveElement, Styled, Window,
 };
 
-use ui::{
+use gpui_component::{
     button::{Button, ButtonVariant, ButtonVariants},
     checkbox::Checkbox,
     dock::PanelControl,
diff --git a/crates/story/src/webview_story.rs b/crates/story/src/webview_story.rs
index 37e41566..b8f2a2a1 100644
--- a/crates/story/src/webview_story.rs
+++ b/crates/story/src/webview_story.rs
@@ -2,12 +2,12 @@ use gpui::{
     div, App, AppContext, ClickEvent, Context, Entity, FocusHandle, Focusable, IntoElement,
     ParentElement as _, Render, Styled as _, Window,
 };
-use ui::{
+use gpui_component::{
     h_flex,
     input::{InputEvent, TextInput},
     v_flex,
     webview::WebView,
-    ActiveTheme,
+    wry, ActiveTheme,
 };
 
 pub struct WebViewStory {
@@ -31,7 +31,7 @@ impl WebViewStory {
         let focus_handle = cx.focus_handle();
 
         let webview = cx.new(|cx| {
-            let webview = ui::wry::WebViewBuilder::new()
+            let webview = wry::WebViewBuilder::new()
                 .build_as_child(&window.raw_window_handle())
                 .unwrap();
             WebView::new(webview, window, cx)