diff --git a/Cargo.lock b/Cargo.lock
index 2064f7c..be54c01 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3532,6 +3532,7 @@ dependencies = [
  "shadcn-ui-leptos-badge",
  "shadcn-ui-leptos-button",
  "shadcn-ui-leptos-card",
+ "shadcn-ui-leptos-table",
 ]
 
 [[package]]
@@ -3556,6 +3557,16 @@ dependencies = [
  "tailwind_fuse",
 ]
 
+[[package]]
+name = "shadcn-ui-leptos-table"
+version = "0.0.1"
+dependencies = [
+ "leptos 0.7.3",
+ "leptos-node-ref",
+ "leptos-style",
+ "tailwind_fuse",
+]
+
 [[package]]
 name = "shadcn-ui-leptos-utils"
 version = "0.0.1"
diff --git a/book-examples/leptos/Cargo.toml b/book-examples/leptos/Cargo.toml
index d93efac..b7457e2 100644
--- a/book-examples/leptos/Cargo.toml
+++ b/book-examples/leptos/Cargo.toml
@@ -21,6 +21,7 @@ shadcn-ui-leptos-alert = { path = "../../packages/leptos/alert" , optional = tru
 shadcn-ui-leptos-badge = { path = "../../packages/leptos/badge", optional = true }
 shadcn-ui-leptos-button = { path = "../../packages/leptos/button", optional = true }
 shadcn-ui-leptos-card = { path = "../../packages/leptos/card", optional = true }
+shadcn-ui-leptos-table = { path = "../../packages/leptos/table", optional = true }
 
 [features]
 default = [
@@ -28,6 +29,7 @@ default = [
     "badge",
     "button",
     "card",
+    "table",
 ]
 alert = [
     "dep:lucide-leptos",
@@ -45,3 +47,4 @@ card = [
     "dep:shadcn-ui-leptos-button",
     "dep:shadcn-ui-leptos-card",
 ]
+table = ["dep:shadcn-ui-leptos-table"]
diff --git a/book-examples/leptos/src/default.rs b/book-examples/leptos/src/default.rs
index a3148f2..4fd4138 100644
--- a/book-examples/leptos/src/default.rs
+++ b/book-examples/leptos/src/default.rs
@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "table")]
+mod table;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "table")]
+        {
+            component_view(self::table::TableRoutes, ())
+        },
     );
 
     view! {
diff --git a/book-examples/leptos/src/default/components/ui.rs b/book-examples/leptos/src/default/components/ui.rs
index a95ce66..6a37d3c 100644
--- a/book-examples/leptos/src/default/components/ui.rs
+++ b/book-examples/leptos/src/default/components/ui.rs
@@ -8,3 +8,5 @@ pub use shadcn_ui_leptos_badge::default as badge;
 pub use shadcn_ui_leptos_button::default as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::default as card;
+#[cfg(feature = "table")]
+pub use shadcn_ui_leptos_table::default as table;
diff --git a/book-examples/leptos/src/default/table.rs b/book-examples/leptos/src/default/table.rs
new file mode 100644
index 0000000..b3f1f13
--- /dev/null
+++ b/book-examples/leptos/src/default/table.rs
@@ -0,0 +1,18 @@
+#[allow(clippy::module_inception)]
+mod table;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn TableRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/table") view=Outlet>
+            <Route path=path!("/") view=table::TableDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}
diff --git a/book-examples/leptos/src/default/table/table.rs b/book-examples/leptos/src/default/table/table.rs
new file mode 100644
index 0000000..7c71b1e
--- /dev/null
+++ b/book-examples/leptos/src/default/table/table.rs
@@ -0,0 +1,120 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::table::{
+    Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,
+};
+
+#[derive(Clone, Copy)]
+struct PaymentDetails {
+    payment_status: &'static str,
+    total_amount: &'static str,
+    payment_method: &'static str,
+}
+
+#[derive(Clone, Copy)]
+struct Invoice {
+    invoice: &'static str,
+    details: RwSignal<PaymentDetails>,
+}
+
+fn invoices() -> Vec<Invoice> {
+    vec![
+        Invoice {
+            invoice: "INV001",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$250.00",
+                payment_method: "Credit Card",
+            }),
+        },
+        Invoice {
+            invoice: "INV002",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Pending",
+                total_amount: "$150.00",
+                payment_method: "PayPal",
+            }),
+        },
+        Invoice {
+            invoice: "INV003",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Unpaid",
+                total_amount: "$350.00",
+                payment_method: "Bank Transfer",
+            }),
+        },
+        Invoice {
+            invoice: "INV004",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$450.00",
+                payment_method: "Credit Card",
+            }),
+        },
+        Invoice {
+            invoice: "INV005",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$550.00",
+                payment_method: "PayPal",
+            }),
+        },
+        Invoice {
+            invoice: "INV006",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Pending",
+                total_amount: "$200.00",
+                payment_method: "Bank Transfer",
+            }),
+        },
+        Invoice {
+            invoice: "INV007",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Unpaid",
+                total_amount: "$300.00",
+                payment_method: "Credit Card",
+            }),
+        },
+    ]
+}
+
+#[component]
+pub fn TableDemo() -> impl IntoView {
+    view! {
+        <Table>
+            <TableCaption>"A list of your recent invoices."</TableCaption>
+            <TableHeader>
+                <TableRow>
+                    <TableHead class="w-[100px]">"Invoice"</TableHead>
+                    <TableHead>"Status"</TableHead>
+                    <TableHead>"Method"</TableHead>
+                    <TableHead class="text-right">"Amount"</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                <For
+                    each=move || invoices()
+                    key=|row| row.invoice
+                    children=move |row| {
+                        let details = row.details.get();
+                        view! {
+                            <TableRow>
+                                <TableCell class="font-medium">{row.invoice}</TableCell>
+                                <TableCell>{details.payment_status}</TableCell>
+                                <TableCell>{details.payment_method}</TableCell>
+                                <TableCell class="text-right">{details.total_amount}</TableCell>
+                            </TableRow>
+                        }
+                    }
+                />
+            </TableBody>
+
+            <TableFooter>
+                <TableRow>
+                    <TableCell colspan="3">"Total"</TableCell>
+                    <TableCell class="text-right">"$2,500.00"</TableCell>
+                </TableRow>
+            </TableFooter>
+        </Table>
+    }
+}
diff --git a/book-examples/leptos/src/new_york.rs b/book-examples/leptos/src/new_york.rs
index 90e0fac..59d9810 100644
--- a/book-examples/leptos/src/new_york.rs
+++ b/book-examples/leptos/src/new_york.rs
@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "table")]
+mod table;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn NewYork() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "table")]
+        {
+            component_view(self::table::TableRoutes, ())
+        },
     );
 
     view! {
diff --git a/book-examples/leptos/src/new_york/components/ui.rs b/book-examples/leptos/src/new_york/components/ui.rs
index 92b7a22..bc003db 100644
--- a/book-examples/leptos/src/new_york/components/ui.rs
+++ b/book-examples/leptos/src/new_york/components/ui.rs
@@ -8,3 +8,5 @@ pub use shadcn_ui_leptos_badge::new_york as badge;
 pub use shadcn_ui_leptos_button::new_york as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::new_york as card;
+#[cfg(feature = "table")]
+pub use shadcn_ui_leptos_table::new_york as table;
diff --git a/book-examples/leptos/src/new_york/table.rs b/book-examples/leptos/src/new_york/table.rs
new file mode 100644
index 0000000..b3f1f13
--- /dev/null
+++ b/book-examples/leptos/src/new_york/table.rs
@@ -0,0 +1,18 @@
+#[allow(clippy::module_inception)]
+mod table;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn TableRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/table") view=Outlet>
+            <Route path=path!("/") view=table::TableDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}
diff --git a/book-examples/leptos/src/new_york/table/table.rs b/book-examples/leptos/src/new_york/table/table.rs
new file mode 100644
index 0000000..baf2c72
--- /dev/null
+++ b/book-examples/leptos/src/new_york/table/table.rs
@@ -0,0 +1,120 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::table::{
+    Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,
+};
+
+#[derive(Clone, Copy)]
+struct PaymentDetails {
+    payment_status: &'static str,
+    total_amount: &'static str,
+    payment_method: &'static str,
+}
+
+#[derive(Clone, Copy)]
+struct Invoice {
+    invoice: &'static str,
+    details: RwSignal<PaymentDetails>,
+}
+
+fn invoices() -> Vec<Invoice> {
+    vec![
+        Invoice {
+            invoice: "INV001",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$250.00",
+                payment_method: "Credit Card",
+            }),
+        },
+        Invoice {
+            invoice: "INV002",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Pending",
+                total_amount: "$150.00",
+                payment_method: "PayPal",
+            }),
+        },
+        Invoice {
+            invoice: "INV003",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Unpaid",
+                total_amount: "$350.00",
+                payment_method: "Bank Transfer",
+            }),
+        },
+        Invoice {
+            invoice: "INV004",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$450.00",
+                payment_method: "Credit Card",
+            }),
+        },
+        Invoice {
+            invoice: "INV005",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$550.00",
+                payment_method: "PayPal",
+            }),
+        },
+        Invoice {
+            invoice: "INV006",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Pending",
+                total_amount: "$200.00",
+                payment_method: "Bank Transfer",
+            }),
+        },
+        Invoice {
+            invoice: "INV007",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Unpaid",
+                total_amount: "$300.00",
+                payment_method: "Credit Card",
+            }),
+        },
+    ]
+}
+
+#[component]
+pub fn TableDemo() -> impl IntoView {
+    view! {
+        <Table>
+            <TableCaption>"A list of your recent invoices."</TableCaption>
+            <TableHeader>
+                <TableRow>
+                    <TableHead class="w-[100px]">"Invoice"</TableHead>
+                    <TableHead>"Status"</TableHead>
+                    <TableHead>"Method"</TableHead>
+                    <TableHead class="text-right">"Amount"</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                <For
+                    each=move || invoices()
+                    key=|row| row.invoice
+                    children=move |row| {
+                        let details = row.details.get();
+                        view! {
+                            <TableRow>
+                                <TableCell class="font-medium">{row.invoice}</TableCell>
+                                <TableCell>{details.payment_status}</TableCell>
+                                <TableCell>{details.payment_method}</TableCell>
+                                <TableCell class="text-right">{details.total_amount}</TableCell>
+                            </TableRow>
+                        }
+                    }
+                />
+            </TableBody>
+
+            <TableFooter>
+                <TableRow>
+                    <TableCell colspan="3">"Total"</TableCell>
+                    <TableCell class="text-right">"$2,500.00"</TableCell>
+                </TableRow>
+            </TableFooter>
+        </Table>
+    }
+}
diff --git a/packages/leptos/table/Cargo.toml b/packages/leptos/table/Cargo.toml
new file mode 100644
index 0000000..5070a72
--- /dev/null
+++ b/packages/leptos/table/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "shadcn-ui-leptos-table"
+description = "Leptos port of shadcn/ui Table."
+homepage = "https://shadcn-ui.rustforweb.org/components/card.html"
+publish = false
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+tailwind_fuse.workspace = true
+leptos.workspace = true
+leptos-style.workspace = true
+leptos-node-ref.workspace = true
diff --git a/packages/leptos/table/README.md b/packages/leptos/table/README.md
new file mode 100644
index 0000000..54c2be7
--- /dev/null
+++ b/packages/leptos/table/README.md
@@ -0,0 +1,21 @@
+<p align="center">
+    <a href="../../../logo.svg">
+        <img src="../../../logo.svg" width="300" height="200" alt="Rust shadcn/ui Logo">
+    </a>
+</p>
+
+<h1 align="center">shadcn-ui-leptos-table</h1>
+
+A responsive table component.
+
+[Rust shadcn/ui](https://github.com/RustForWeb/shadcn-ui) is a Rust port of [shadcn/ui](https://ui.shadcn.com/).
+
+## Documentation
+
+See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/) for documentation.
+
+## Rust For Web
+
+The Rust shadcn/ui project is part of the [Rust For Web](https://github.com/RustForWeb).
+
+[Rust For Web](https://github.com/RustForWeb) creates and ports web UI libraries for Rust. All projects are free and open source.
diff --git a/packages/leptos/table/src/default.rs b/packages/leptos/table/src/default.rs
new file mode 100644
index 0000000..1e10bf5
--- /dev/null
+++ b/packages/leptos/table/src/default.rs
@@ -0,0 +1,202 @@
+use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
+use leptos_style::Style;
+use tailwind_fuse::*;
+
+#[component]
+pub fn Table(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <div class="relative w-full overflow-auto">
+            <table
+                node_ref=node_ref
+
+                class=move || tw_merge!("w-full caption-bottom text-sm", class.get())
+                id=move || id.get()
+                style=style
+            >
+                {children.map(|children| children())}
+            </table>
+        </div>
+    }
+}
+
+#[component]
+pub fn TableHeader(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <thead
+            node_ref=node_ref
+
+            class=move || tw_merge!("[&_tr]:border-b", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </thead>
+    }
+}
+
+#[component]
+pub fn TableBody(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <tbody
+            node_ref=node_ref
+
+            class=move || tw_merge!("[&_tr:last-child]:border-0", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tbody>
+    }
+}
+
+#[component]
+pub fn TableFooter(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <tfoot
+            node_ref=node_ref
+
+            class=move || tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tfoot>
+    }
+}
+
+#[component]
+pub fn TableRow(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <tr
+            node_ref=node_ref
+
+            class=move || tw_merge!("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tr>
+    }
+}
+
+#[component]
+pub fn TableHead(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] abbr: MaybeProp<String>,
+    #[prop(into, optional)] colspan: MaybeProp<String>,
+    #[prop(into, optional)] headers: MaybeProp<String>,
+    #[prop(into, optional)] rowspan: MaybeProp<String>,
+    #[prop(into, optional)] scope: MaybeProp<String>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <th
+            node_ref=node_ref
+
+            class=move || tw_merge!("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", class.get())
+            id=move || id.get()
+            style=style
+
+            abbr=move ||abbr.get()
+            colspan=move || colspan.get()
+            headers=move || headers.get()
+            rowspan=move || rowspan.get()
+            scope=move || scope.get()
+        >
+            {children.map(|children| children())}
+        </th>
+    }
+}
+
+#[component]
+pub fn TableCell(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] colspan: MaybeProp<String>,
+    #[prop(into, optional)] headers: MaybeProp<String>,
+    #[prop(into, optional)] rowspan: MaybeProp<String>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <td
+            node_ref=node_ref
+
+            class=move || tw_merge!("p-4 align-middle [&:has([role=checkbox])]:pr-0", class.get())
+            id=move || id.get()
+            style=style
+
+            colspan=move || colspan.get()
+            headers=move || headers.get()
+            rowspan=move || rowspan.get()
+        >
+            {children.map(|children| children())}
+        </td>
+    }
+}
+
+#[component]
+pub fn TableCaption(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <caption
+            node_ref=node_ref
+
+            class=move || tw_merge!("mt-4 text-sm text-muted-foreground", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </caption>
+    }
+}
diff --git a/packages/leptos/table/src/lib.rs b/packages/leptos/table/src/lib.rs
new file mode 100644
index 0000000..a11f5c6
--- /dev/null
+++ b/packages/leptos/table/src/lib.rs
@@ -0,0 +1,8 @@
+//! Leptos port of [shadcn/ui Table](https://ui.shadcn.com/docs/components/table).
+//!
+//! A responsive table component.
+//!
+//! See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/components/table.html) for more documenation.
+
+pub mod default;
+pub mod new_york;
diff --git a/packages/leptos/table/src/new_york.rs b/packages/leptos/table/src/new_york.rs
new file mode 100644
index 0000000..b3528ed
--- /dev/null
+++ b/packages/leptos/table/src/new_york.rs
@@ -0,0 +1,202 @@
+use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
+use leptos_style::Style;
+use tailwind_fuse::*;
+
+#[component]
+pub fn Table(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <div class="relative w-full overflow-auto">
+            <table
+                node_ref=node_ref
+
+                class=move || tw_merge!("w-full caption-bottom text-sm", class.get())
+                id=move || id.get()
+                style=style
+            >
+                {children.map(|children| children())}
+            </table>
+        </div>
+    }
+}
+
+#[component]
+pub fn TableHeader(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <thead
+            node_ref=node_ref
+
+            class=move || tw_merge!("[&_tr]:border-b", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </thead>
+    }
+}
+
+#[component]
+pub fn TableBody(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <tbody
+            node_ref=node_ref
+
+            class=move || tw_merge!("[&_tr:last-child]:border-0", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tbody>
+    }
+}
+
+#[component]
+pub fn TableFooter(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <tfoot
+            node_ref=node_ref
+
+            class=move || tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tfoot>
+    }
+}
+
+#[component]
+pub fn TableRow(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <tr
+            node_ref=node_ref
+
+            class=move || tw_merge!("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tr>
+    }
+}
+
+#[component]
+pub fn TableHead(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] abbr: MaybeProp<String>,
+    #[prop(into, optional)] colspan: MaybeProp<String>,
+    #[prop(into, optional)] headers: MaybeProp<String>,
+    #[prop(into, optional)] rowspan: MaybeProp<String>,
+    #[prop(into, optional)] scope: MaybeProp<String>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <th
+            node_ref=node_ref
+
+            class=move || tw_merge!("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", class.get())
+            id=move || id.get()
+            style=style
+
+            abbr=move ||abbr.get()
+            colspan=move || colspan.get()
+            headers=move || headers.get()
+            rowspan=move || rowspan.get()
+            scope=move || scope.get()
+        >
+            {children.map(|children| children())}
+        </th>
+    }
+}
+
+#[component]
+pub fn TableCell(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] colspan: MaybeProp<String>,
+    #[prop(into, optional)] headers: MaybeProp<String>,
+    #[prop(into, optional)] rowspan: MaybeProp<String>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <td
+            node_ref=node_ref
+
+            class=move || tw_merge!("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", class.get())
+            id=move || id.get()
+            style=style
+
+            colspan=move || colspan.get()
+            headers=move || headers.get()
+            rowspan=move || rowspan.get()
+        >
+            {children.map(|children| children())}
+        </td>
+    }
+}
+
+#[component]
+pub fn TableCaption(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <caption
+            node_ref=node_ref
+
+            class=move || tw_merge!("mt-4 text-sm text-muted-foreground", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </caption>
+    }
+}