diff --git a/packages/docs/src/components/examples/akumatus-filter-builder.tsx b/packages/docs/src/components/examples/akumatus-filter-builder.tsx
new file mode 100644
index 0000000..c7e264a
--- /dev/null
+++ b/packages/docs/src/components/examples/akumatus-filter-builder.tsx
@@ -0,0 +1,172 @@
+import {
+ createFilterTheme,
+ FilterBuilder,
+ FilterSphereProvider,
+ useFilterGroup,
+ useFilterRule,
+ useFilterSphere,
+ useView,
+} from "@fn-sphere/filter";
+import { z } from "zod";
+
+const schema = z.object({
+ id: z.number(),
+ name: z.string(),
+ createdAt: z.date(),
+ status: z.union([
+ z.literal("pending"),
+ z.literal("completed"),
+ z.literal("cancelled"),
+ ]),
+});
+
+// Ported from [akumatus/FilterBuilder](https://github.com/akumatus/FilterBuilder)
+// Licensed under MIT
+
+const theme = createFilterTheme({
+ primitives: {
+ input: ({ ...props }) => {
+ return (
+
+ );
+ },
+ select: ({ ...props }) => {
+ return (
+
+ );
+ },
+ },
+ templates: {
+ FilterGroupContainer: ({ rule, children }) => {
+ const {
+ ruleState: { isRoot, isLastGroup },
+ toggleGroupOp,
+ appendChildGroup,
+ appendChildRule,
+ removeGroup,
+ } = useFilterGroup(rule);
+ const isAnd = rule.op === "and";
+ return (
+
+
+
+
+
+
+
+
+
+
+ {isRoot ? null : (
+
+ )}
+
+
+ {children}
+
+ );
+ },
+ SingleFilter: ({ rule }) => {
+ const {
+ ruleState: { isLastRule },
+ removeRule,
+ } = useFilterRule(rule);
+ const { FieldSelect, FilterSelect, FilterDataInput } =
+ useView("templates");
+ return (
+
+
+
+
+
+
+
+ );
+ },
+ },
+});
+
+export function AdvancedFilter() {
+ const { context } = useFilterSphere({ schema });
+ return (
+
+
+
+ );
+}
diff --git a/packages/docs/src/content/docs/reference/example.md b/packages/docs/src/content/docs/reference/example.md
deleted file mode 100644
index 3d3337b..0000000
--- a/packages/docs/src/content/docs/reference/example.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 🚧 Example
-description: Practical implementations of Filter Sphere
----
-
-WIP
diff --git a/packages/docs/src/content/docs/reference/example.mdx b/packages/docs/src/content/docs/reference/example.mdx
new file mode 100644
index 0000000..7b660eb
--- /dev/null
+++ b/packages/docs/src/content/docs/reference/example.mdx
@@ -0,0 +1,14 @@
+---
+title: 🚧 Example
+description: Practical implementations of Filter Sphere
+---
+
+## bootstrap styles
+
+This example is ported from [akumatus/FilterBuilder](https://github.com/akumatus/FilterBuilder).
+
+import { AdvancedFilter } from "~/components/examples/akumatus-filter-builder";
+
+