diff --git a/JSMR.UI.Blazor/Components/Chip.razor b/JSMR.UI.Blazor/Components/Chip.razor
new file mode 100644
index 0000000..8450ad0
--- /dev/null
+++ b/JSMR.UI.Blazor/Components/Chip.razor
@@ -0,0 +1,20 @@
+@using JSMR.UI.Blazor.Enums
+
+<div class="j-chip">
+    @if (Graphic != null)
+    {
+        <Icon Graphic="@Graphic.Value" Color="@Color"></Icon>
+    }
+    <span>@ChildContent</span>
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public Graphic? Graphic { get; set; }
+
+    [Parameter]
+    public ColorVarient Color { get; set; } = ColorVarient.Primary;
+}
\ No newline at end of file
diff --git a/JSMR.UI.Blazor/wwwroot/css/app.css b/JSMR.UI.Blazor/wwwroot/css/app.css
index 3eb8faa..f3fda9e 100644
--- a/JSMR.UI.Blazor/wwwroot/css/app.css
+++ b/JSMR.UI.Blazor/wwwroot/css/app.css
@@ -608,6 +608,15 @@ code {
     font-weight: 500;*/
 }
 
+/* Chips */
+.j-chip {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
 /* Icons */
 .j-icon {
     mask-repeat: no-repeat;