diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index 501df0f7..868436d9 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -407,8 +407,10 @@ export function DocsLayout({
                                   ? 'text-fuchsia-500'
                                   : child.badge === 'qwik'
                                   ? 'text-indigo-500'
+                                  : child.badge === 'lit'
+                                  ? 'text-emerald-500'
                                   : child.badge === 'vanilla'
-                                  ? 'text-gray-300'
+                                  ? 'text-yellow-500'
                                   : 'text-gray-500'
                               }`}
                             >
diff --git a/app/libraries/table.ts b/app/libraries/table.ts
index 8cc15cec..76c7a678 100644
--- a/app/libraries/table.ts
+++ b/app/libraries/table.ts
@@ -7,7 +7,7 @@ export const tableProject: Library = {
   cardStyles: `shadow-xl shadow-blue-700/20 dark:shadow-lg dark:shadow-blue-500/30 text-blue-500 border-2 border-transparent hover:border-current`,
   to: '/table',
   tagline: `Headless UI for building powerful tables & datagrids`,
-  description: `Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid, Svelte, Qwik, and Angular while retaining 100% control over markup and styles.`,
+  description: `Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit while retaining 100% control over markup and styles.`,
   ogImage: 'https://github.com/tanstack/table/raw/main/media/repo-header.png',
   bgStyle: 'bg-blue-500',
   textStyle: 'text-blue-500',
@@ -18,7 +18,16 @@ export const tableProject: Library = {
   colorFrom: 'from-teal-500',
   colorTo: 'to-blue-600',
   textColor: 'text-blue-600',
-  frameworks: ['angular', 'qwik', 'react', 'solid', 'svelte', 'vue', 'vanilla'],
+  frameworks: [
+    'angular',
+    'lit',
+    'qwik',
+    'react',
+    'solid',
+    'svelte',
+    'vue',
+    'vanilla',
+  ],
   scarfId: 'dc8b39e1-3fe9-4f3a-8e56-d4e2cf420a9e',
   defaultDocs: 'framework/react/overview',
   handleRedirects: (href) => {
diff --git a/app/routes/_libraries.table.$version.index.tsx b/app/routes/_libraries.table.$version.index.tsx
index 33fdaab7..ee39d9ff 100644
--- a/app/routes/_libraries.table.$version.index.tsx
+++ b/app/routes/_libraries.table.$version.index.tsx
@@ -421,6 +421,7 @@ export default function TableVersionIndex() {
             {(
               [
                 { label: 'Angular', value: 'angular' },
+                { label: 'Lit', value: 'lit' },
                 { label: 'Qwik', value: 'qwik' },
                 { label: 'React', value: 'react' },
                 { label: 'Solid', value: 'solid' },
diff --git a/app/utils/sandbox.ts b/app/utils/sandbox.ts
index 03220770..aa09d367 100644
--- a/app/utils/sandbox.ts
+++ b/app/utils/sandbox.ts
@@ -9,4 +9,6 @@ export const getInitialSandboxFileName = (framework: Framework) =>
     ? 'src/App.tsx'
     : framework === 'angular'
     ? 'src/app/app.component.ts'
+    : framework === 'lit'
+    ? 'src/main.ts'
     : 'src/main.tsx'