diff --git a/Editor/MainComponents/UIComponentEditor.cs b/Editor/MainComponents/UIComponentEditor.cs
new file mode 100644
index 00000000..b942a2bd
--- /dev/null
+++ b/Editor/MainComponents/UIComponentEditor.cs
@@ -0,0 +1,121 @@
+using System.Collections.Generic;
+using UnityEditor;
+using UnityEngine;
+using UnityEngine.Assertions;
+using XCharts.Runtime;
+
+namespace XCharts.Editor
+{
+    public class UIComponentEditor : UnityEditor.Editor
+    {
+        class Styles
+        {
+            public static readonly GUIContent btnAddComponent = new GUIContent("Add Main Component", "");
+            public static readonly GUIContent btnRebuildChartObject = new GUIContent("Rebuild Object", "");
+            public static readonly GUIContent btnSaveAsImage = new GUIContent("Save As Image", "");
+            public static readonly GUIContent btnCheckWarning = new GUIContent("Check Warning", "");
+            public static readonly GUIContent btnHideWarning = new GUIContent("Hide Warning", "");
+        }
+        public UIComponent m_UIComponent;
+
+        public static T AddUIComponent<T>(string chartName) where T : UIComponent
+        {
+            return XChartsEditor.AddGraph<T>(chartName);
+        }
+
+        protected Dictionary<string, SerializedProperty> m_Properties = new Dictionary<string, SerializedProperty>();
+
+        protected virtual void OnEnable()
+        {
+            m_Properties.Clear();
+            m_UIComponent = (UIComponent) target;
+        }
+
+        public override void OnInspectorGUI()
+        {
+            serializedObject.Update();
+            PropertyField("m_Script");
+
+            OnStartInspectorGUI();
+            OnDebugInspectorGUI();
+            serializedObject.ApplyModifiedProperties();
+        }
+
+        protected virtual void OnStartInspectorGUI() { }
+
+        protected virtual void OnDebugInspectorGUI()
+        {
+            EditorGUILayout.Space();
+            PropertyField("m_DebugModel");
+            OnDebugStartInspectorGUI();
+            if (GUILayout.Button(Styles.btnRebuildChartObject))
+            {
+                m_UIComponent.RebuildChartObject();
+            }
+            if (GUILayout.Button(Styles.btnSaveAsImage))
+            {
+                m_UIComponent.SaveAsImage();
+            }
+            OnDebugEndInspectorGUI();
+        }
+
+        protected virtual void OnDebugStartInspectorGUI() { }
+        protected virtual void OnDebugEndInspectorGUI() { }
+
+        protected void PropertyField(string name)
+        {
+            if (!m_Properties.ContainsKey(name))
+            {
+                var prop = serializedObject.FindProperty(name);
+                if (prop == null)
+                {
+                    Debug.LogError("Property " + name + " not found!");
+                    return;
+                }
+                m_Properties.Add(name, prop);
+            }
+            EditorGUILayout.PropertyField(m_Properties[name]);
+        }
+
+        protected void PropertyField(SerializedProperty property)
+        {
+            Assert.IsNotNull(property);
+            var title = ChartEditorHelper.GetContent(property.displayName);
+            PropertyField(property, title);
+        }
+
+        protected void PropertyField(SerializedProperty property, GUIContent title)
+        {
+            EditorGUILayout.PropertyField(property, title);
+        }
+
+        protected void PropertyListField(string relativePropName, bool showOrder = true, params HeaderMenuInfo[] menus)
+        {
+            var m_DrawRect = GUILayoutUtility.GetRect(1f, 17f);
+            var height = 0f;
+            var prop = FindProperty(relativePropName);
+            prop.isExpanded = ChartEditorHelper.MakeListWithFoldout(ref m_DrawRect, ref height,
+                prop, prop.isExpanded, showOrder, true, menus);
+            if (prop.isExpanded)
+            {
+                GUILayoutUtility.GetRect(1f, height - 17);
+            }
+        }
+
+        protected void PropertyTwoFiled(string relativePropName)
+        {
+            var m_DrawRect = GUILayoutUtility.GetRect(1f, 17f);
+            var prop = FindProperty(relativePropName);
+            ChartEditorHelper.MakeTwoField(ref m_DrawRect, m_DrawRect.width, prop, prop.displayName);
+        }
+
+        protected SerializedProperty FindProperty(string path)
+        {
+            if (!m_Properties.ContainsKey(path))
+            {
+                m_Properties.Add(path, serializedObject.FindProperty(path));
+            }
+            return m_Properties[path];
+        }
+    }
+}
\ No newline at end of file
diff --git a/Editor/MainComponents/UIComponentEditor.cs.meta b/Editor/MainComponents/UIComponentEditor.cs.meta
new file mode 100644
index 00000000..72da37b3
--- /dev/null
+++ b/Editor/MainComponents/UIComponentEditor.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: d226759112b0d463b8fba4830762893c
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Editor/MainComponents/UIComponentThemeDrawer.cs b/Editor/MainComponents/UIComponentThemeDrawer.cs
new file mode 100644
index 00000000..d06d6140
--- /dev/null
+++ b/Editor/MainComponents/UIComponentThemeDrawer.cs
@@ -0,0 +1,23 @@
+using UnityEditor;
+using UnityEngine;
+using XCharts.Runtime;
+
+namespace XCharts.Editor
+{
+    [CustomPropertyDrawer(typeof(UIComponentTheme), true)]
+    public class UIComponentThemeDrawer : BasePropertyDrawer
+    {
+        public override string ClassName { get { return "Theme"; } }
+        public override void OnGUI(Rect pos, SerializedProperty prop, GUIContent label)
+        {
+            base.OnGUI(pos, prop, label);
+            if (MakeComponentFoldout(prop, "m_Show", true))
+            {
+                ++EditorGUI.indentLevel;
+                PropertyField(prop, "m_SharedTheme");
+                PropertyField(prop, "m_TransparentBackground");
+                --EditorGUI.indentLevel;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Editor/MainComponents/UIComponentThemeDrawer.cs.meta b/Editor/MainComponents/UIComponentThemeDrawer.cs.meta
new file mode 100644
index 00000000..75ad5abd
--- /dev/null
+++ b/Editor/MainComponents/UIComponentThemeDrawer.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: dca2d7a2ed994420182384c2efa48c0c
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Internal/UIComponent.cs b/Runtime/Internal/UIComponent.cs
new file mode 100644
index 00000000..8a1266e6
--- /dev/null
+++ b/Runtime/Internal/UIComponent.cs
@@ -0,0 +1,92 @@
+using System;
+using UnityEngine;
+using UnityEngine.UI;
+
+namespace XCharts.Runtime
+{
+    /// <summary>
+    /// UI组件基类。
+    /// </summary>
+    [ExecuteInEditMode]
+    [RequireComponent(typeof(RectTransform))]
+    [DisallowMultipleComponent]
+    public class UIComponent : BaseGraph
+    {
+        [SerializeField] private bool m_DebugModel = false;
+        [SerializeField] protected UIComponentTheme m_Theme = new UIComponentTheme();
+        [SerializeField] private ImageStyle m_Background = new ImageStyle() { show = false };
+        protected bool m_DataDirty;
+        public override HideFlags chartHideFlags { get { return m_DebugModel ? HideFlags.None : HideFlags.HideInHierarchy; } }
+        public UIComponentTheme theme { get { return m_Theme; } set { m_Theme = value; } }
+        /// <summary>
+        /// 背景样式。
+        /// </summary>
+        public ImageStyle background { get { return m_Background; } set { m_Background = value; color = Color.white; } }
+        /// <summary>
+        /// Update chart theme.
+        /// |切换内置主题。
+        /// </summary>
+        /// <param name="theme">theme</param>
+        public bool UpdateTheme(ThemeType theme)
+        {
+            if (theme == ThemeType.Custom)
+            {
+                Debug.LogError("UpdateTheme: not support switch to Custom theme.");
+                return false;
+            }
+            if (m_Theme.sharedTheme == null)
+                m_Theme.sharedTheme = XCThemeMgr.GetTheme(ThemeType.Default);
+            m_Theme.sharedTheme.CopyTheme(theme);
+            m_Theme.SetAllDirty();
+            return true;
+        }
+
+        protected override void InitComponent()
+        {
+            base.InitComponent();
+            if (m_Theme.sharedTheme == null)
+                m_Theme.sharedTheme = XCThemeMgr.GetTheme(ThemeType.Default);
+            UIHelper.InitBackground(this);
+        }
+
+        protected override void CheckComponent()
+        {
+            base.CheckComponent();
+            if (m_Theme.anyDirty)
+            {
+                if (m_Theme.componentDirty)
+                {
+                    SetAllComponentDirty();
+                }
+                if (m_Theme.vertsDirty) RefreshGraph();
+                m_Theme.ClearDirty();
+            }
+        }
+
+        protected override void SetAllComponentDirty()
+        {
+            base.SetAllComponentDirty();
+            InitComponent();
+        }
+
+        protected override void OnDrawPainterBase(VertexHelper vh, Painter painter)
+        {
+            vh.Clear();
+            UIHelper.DrawBackground(vh, this);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+            if (m_DataDirty)
+            {
+                m_DataDirty = false;
+                DataDirty();
+            }
+        }
+
+        protected virtual void DataDirty()
+        {
+        }
+    }
+}
\ No newline at end of file
diff --git a/Runtime/Internal/UIComponent.cs.meta b/Runtime/Internal/UIComponent.cs.meta
new file mode 100644
index 00000000..9c155b18
--- /dev/null
+++ b/Runtime/Internal/UIComponent.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: bb30814b19a9d4c1d800ae89e4537a8a
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Internal/UIComponentTheme.cs b/Runtime/Internal/UIComponentTheme.cs
new file mode 100644
index 00000000..ad51eed3
--- /dev/null
+++ b/Runtime/Internal/UIComponentTheme.cs
@@ -0,0 +1,53 @@
+using System;
+using UnityEngine;
+using UnityEngine.UI;
+
+namespace XCharts.Runtime
+{
+    [Serializable]
+    public class UIComponentTheme : ChildComponent
+    {
+        [SerializeField] private bool m_Show = true;
+        [SerializeField] private Theme m_SharedTheme;
+        [SerializeField] private bool m_TransparentBackground = false;
+
+        public bool show { get { return m_Show; } }
+        /// <summary>
+        /// the theme of chart.
+        /// |主题类型。
+        /// </summary>
+        public ThemeType themeType
+        {
+            get { return sharedTheme.themeType; }
+        }
+        /// <summary>
+        /// theme name.
+        /// |主题名字。
+        /// </summary>
+        public string themeName
+        {
+            get { return sharedTheme.themeName; }
+        }
+        /// <summary>
+        /// the asset of theme.
+        /// |主题配置。
+        /// </summary>
+        public Theme sharedTheme
+        {
+            get { return m_SharedTheme; }
+            set { m_SharedTheme = value; SetAllDirty(); }
+        }
+        /// <summary>
+        /// the background color of chart.
+        /// |背景颜色。
+        /// </summary>
+        public Color32 backgroundColor
+        {
+            get
+            {
+                if (m_TransparentBackground) return ColorUtil.clearColor32;
+                else return sharedTheme.backgroundColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Runtime/Internal/UIComponentTheme.cs.meta b/Runtime/Internal/UIComponentTheme.cs.meta
new file mode 100644
index 00000000..c4032b0f
--- /dev/null
+++ b/Runtime/Internal/UIComponentTheme.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 259f5ef4039524e15a7f88578635e907
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Internal/Utilities/UIHelper.cs b/Runtime/Internal/Utilities/UIHelper.cs
new file mode 100644
index 00000000..a5598f30
--- /dev/null
+++ b/Runtime/Internal/Utilities/UIHelper.cs
@@ -0,0 +1,57 @@
+using System;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UI;
+using XUGL;
+
+namespace XCharts.Runtime
+{
+    /// <summary>
+    /// UI帮助类。
+    /// </summary>
+    public static class UIHelper
+    {
+        internal static void DrawBackground(VertexHelper vh, UIComponent component)
+        {
+            if (component.background.show == false ||
+                (component.background.sprite == null && ChartHelper.IsClearColor(component.background.color)))
+            {
+                var p1 = new Vector3(component.graphX, component.graphY);
+                var p2 = new Vector3(component.graphX + component.graphWidth, component.graphY);
+                var p3 = new Vector3(component.graphX + component.graphWidth, component.graphY + component.graphHeight);
+                var p4 = new Vector3(component.graphX, component.graphY + component.graphHeight);
+                UGL.DrawQuadrilateral(vh, p1, p2, p3, p4, GetBackgroundColor(component));
+            }
+        }
+
+        internal static void InitBackground(UIComponent table)
+        {
+            if (table.background.show == false ||
+                (table.background.sprite == null && ChartHelper.IsClearColor(table.background.color)))
+            {
+                ChartHelper.DestoryGameObject(table.transform, "Background");
+                return;
+            }
+            var sizeDelta = table.background.width > 0 && table.background.height > 0 ?
+                new Vector2(table.background.width, table.background.height) :
+                table.graphSizeDelta;
+            var backgroundObj = ChartHelper.AddObject("Background", table.transform, table.graphMinAnchor,
+                table.graphMaxAnchor, table.graphPivot, sizeDelta);
+            backgroundObj.hideFlags = table.chartHideFlags;
+
+            var backgroundImage = ChartHelper.EnsureComponent<Image>(backgroundObj);
+            ChartHelper.UpdateRectTransform(backgroundObj, table.graphMinAnchor,
+                table.graphMaxAnchor, table.graphPivot, sizeDelta);
+            ChartHelper.SetBackground(backgroundImage, table.background);
+            backgroundObj.transform.SetSiblingIndex(0);
+        }
+
+        public static Color32 GetBackgroundColor(UIComponent component)
+        {
+            if (component.background.show && !ChartHelper.IsClearColor(component.background.color))
+                return component.background.color;
+            else
+                return component.theme.backgroundColor;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Runtime/Internal/Utilities/UIHelper.cs.meta b/Runtime/Internal/Utilities/UIHelper.cs.meta
new file mode 100644
index 00000000..029495c6
--- /dev/null
+++ b/Runtime/Internal/Utilities/UIHelper.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 3be0399ecf6194793aa056e45ebfe20a
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: