diff --git a/examples/mock-todoapp-server/src/server.ts b/examples/mock-todoapp-server/src/server.ts
index 22124860..41b7d8ca 100644
--- a/examples/mock-todoapp-server/src/server.ts
+++ b/examples/mock-todoapp-server/src/server.ts
@@ -9,6 +9,7 @@ type Todo = {
   name: string;
   priority: "HIGH" | "MEDIUM" | "LOW";
   hasDone: boolean;
+  dueDate?: string;
 };
 
 // In-memory store for todos
@@ -25,6 +26,8 @@ const todos: Todo[] = [
 
 // Define the GraphQL schema
 const typeDefs = gql`
+  scalar Date
+
   enum TodoPriority {
     LOW
     MEDIUM
@@ -36,6 +39,7 @@ const typeDefs = gql`
     name: String!
     priority: TodoPriority!
     hasDone: Boolean!
+    dueDate: Date
   }
 
   type TodosCollection {
@@ -43,10 +47,9 @@ const typeDefs = gql`
   }
 
   input TodoInput {
-    id: ID
     name: String!
     priority: TodoPriority!
-    hasDone: Boolean
+    dueDate: Date
   }
 
   input MarkTodoDoneInput {
diff --git a/examples/vite-todoapp/package.json b/examples/vite-todoapp/package.json
index 2fb26bd0..e099cbc9 100644
--- a/examples/vite-todoapp/package.json
+++ b/examples/vite-todoapp/package.json
@@ -13,6 +13,7 @@
     "@chakra-ui/react": "^3.2.5",
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
+    "@fabrix-framework/unstyled": "workspace:*",
     "@fabrix-framework/chakra-ui": "workspace:*",
     "@fabrix-framework/fabrix": "workspace:*",
     "graphql": "^16.9.0",
diff --git a/examples/vite-todoapp/src/App.tsx b/examples/vite-todoapp/src/App.tsx
index 148a0fd3..5bd29bbb 100644
--- a/examples/vite-todoapp/src/App.tsx
+++ b/examples/vite-todoapp/src/App.tsx
@@ -1,4 +1,3 @@
-import { Button, Heading, Stack } from "@chakra-ui/react";
 import { FabrixComponent } from "@fabrix-framework/fabrix";
 import { css } from "@emotion/css";
 import { graphql } from "./graphql";
@@ -9,68 +8,35 @@ const containerClassName = css`
 
 function App() {
   return (
-    <Stack padding={10}>
-      <Heading textAlign="center" size="md">
-        Fabrix TODO app example
-      </Heading>
+    <div>
+      <div>Fabrix TODO app example</div>
       <FabrixComponent
         containerClassName={containerClassName}
         query={graphql(`
           mutation createTodo($input: TodoInput!) {
-            addTodo(input: $input) {
+            addTodo(input: $input) @fabrixForm {
               id
             }
           }
         `)}
-      >
-        {({ getInput }) =>
-          getInput({}, ({ Field, getAction }) => (
-            <form {...getAction()}>
-              <Field name="input.name" />
-              <Field name="input.priority" />
-              <Button type="submit">Add</Button>
-            </form>
-          ))
-        }
-      </FabrixComponent>
+      />
       <FabrixComponent
         containerClassName={containerClassName}
         query={graphql(`
           query todos {
-            allTodos
-              @fabrixView(
-                input: [
-                  { field: "collection", config: { label: "Your tasks" } }
-                  { field: "collection.id", config: { hidden: true } }
-                  { field: "collection.hasDone", config: { label: "Status" } }
-                  {
-                    field: "collection.actions"
-                    config: {
-                      label: "Actions"
-                      index: -1
-                      componentType: {
-                        name: "IDActionCell"
-                        props: [
-                          { name: "label", value: "Done" }
-                          { name: "color", value: "blue" }
-                          { name: "mutation", value: "markTodoDone" }
-                        ]
-                      }
-                    }
-                  }
-                ]
-              ) {
+            allTodos @fabrixView {
               collection {
                 id
                 name
                 priority
+                dueDate
                 hasDone
               }
             }
           }
         `)}
       />
-    </Stack>
+    </div>
   );
 }
 
diff --git a/examples/vite-todoapp/src/graphql/gql.ts b/examples/vite-todoapp/src/graphql/gql.ts
index 8a4678d2..3a82e092 100644
--- a/examples/vite-todoapp/src/graphql/gql.ts
+++ b/examples/vite-todoapp/src/graphql/gql.ts
@@ -14,9 +14,9 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
-    "\n          mutation createTodo($input: TodoInput!) {\n            addTodo(input: $input) {\n              id\n            }\n          }\n        ": types.CreateTodoDocument,
-    "\n          query todos {\n            allTodos\n              @fabrixView(\n                input: [\n                  { field: \"collection\", config: { label: \"Your tasks\" } }\n                  { field: \"collection.id\", config: { hidden: true } }\n                  { field: \"collection.hasDone\", config: { label: \"Status\" } }\n                  {\n                    field: \"collection.actions\"\n                    config: {\n                      label: \"Actions\"\n                      index: -1\n                      componentType: {\n                        name: \"IDActionCell\"\n                        props: [\n                          { name: \"label\", value: \"Done\" }\n                          { name: \"color\", value: \"blue\" }\n                          { name: \"mutation\", value: \"markTodoDone\" }\n                        ]\n                      }\n                    }\n                  }\n                ]\n              ) {\n              collection {\n                id\n                name\n                priority\n                hasDone\n              }\n            }\n          }\n        ": types.TodosDocument,
-    "\n          mutation markTodoDone($input: MarkTodoDoneInput!) {\n            markTodoDone(input: $input) {\n              id\n            }\n          }\n        ": types.MarkTodoDoneDocument,
+    "\n          mutation createTodo($input: TodoInput!) {\n            addTodo(input: $input) @fabrixForm {\n              id\n            }\n          }\n        ": types.CreateTodoDocument,
+    "\n          query todos {\n            allTodos @fabrixView {\n              collection {\n                id\n                name\n                priority\n                dueDate\n                hasDone\n              }\n            }\n          }\n        ": types.TodosDocument,
+    "\n        mutation markTodoDone($input: MarkTodoDoneInput!) {\n          markTodoDone(input: $input) {\n            id\n          }\n        }\n      ": types.MarkTodoDoneDocument,
 };
 
 /**
@@ -36,15 +36,15 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n          mutation createTodo($input: TodoInput!) {\n            addTodo(input: $input) {\n              id\n            }\n          }\n        "): (typeof documents)["\n          mutation createTodo($input: TodoInput!) {\n            addTodo(input: $input) {\n              id\n            }\n          }\n        "];
+export function graphql(source: "\n          mutation createTodo($input: TodoInput!) {\n            addTodo(input: $input) @fabrixForm {\n              id\n            }\n          }\n        "): (typeof documents)["\n          mutation createTodo($input: TodoInput!) {\n            addTodo(input: $input) @fabrixForm {\n              id\n            }\n          }\n        "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n          query todos {\n            allTodos\n              @fabrixView(\n                input: [\n                  { field: \"collection\", config: { label: \"Your tasks\" } }\n                  { field: \"collection.id\", config: { hidden: true } }\n                  { field: \"collection.hasDone\", config: { label: \"Status\" } }\n                  {\n                    field: \"collection.actions\"\n                    config: {\n                      label: \"Actions\"\n                      index: -1\n                      componentType: {\n                        name: \"IDActionCell\"\n                        props: [\n                          { name: \"label\", value: \"Done\" }\n                          { name: \"color\", value: \"blue\" }\n                          { name: \"mutation\", value: \"markTodoDone\" }\n                        ]\n                      }\n                    }\n                  }\n                ]\n              ) {\n              collection {\n                id\n                name\n                priority\n                hasDone\n              }\n            }\n          }\n        "): (typeof documents)["\n          query todos {\n            allTodos\n              @fabrixView(\n                input: [\n                  { field: \"collection\", config: { label: \"Your tasks\" } }\n                  { field: \"collection.id\", config: { hidden: true } }\n                  { field: \"collection.hasDone\", config: { label: \"Status\" } }\n                  {\n                    field: \"collection.actions\"\n                    config: {\n                      label: \"Actions\"\n                      index: -1\n                      componentType: {\n                        name: \"IDActionCell\"\n                        props: [\n                          { name: \"label\", value: \"Done\" }\n                          { name: \"color\", value: \"blue\" }\n                          { name: \"mutation\", value: \"markTodoDone\" }\n                        ]\n                      }\n                    }\n                  }\n                ]\n              ) {\n              collection {\n                id\n                name\n                priority\n                hasDone\n              }\n            }\n          }\n        "];
+export function graphql(source: "\n          query todos {\n            allTodos @fabrixView {\n              collection {\n                id\n                name\n                priority\n                dueDate\n                hasDone\n              }\n            }\n          }\n        "): (typeof documents)["\n          query todos {\n            allTodos @fabrixView {\n              collection {\n                id\n                name\n                priority\n                dueDate\n                hasDone\n              }\n            }\n          }\n        "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n          mutation markTodoDone($input: MarkTodoDoneInput!) {\n            markTodoDone(input: $input) {\n              id\n            }\n          }\n        "): (typeof documents)["\n          mutation markTodoDone($input: MarkTodoDoneInput!) {\n            markTodoDone(input: $input) {\n              id\n            }\n          }\n        "];
+export function graphql(source: "\n        mutation markTodoDone($input: MarkTodoDoneInput!) {\n          markTodoDone(input: $input) {\n            id\n          }\n        }\n      "): (typeof documents)["\n        mutation markTodoDone($input: MarkTodoDoneInput!) {\n          markTodoDone(input: $input) {\n            id\n          }\n        }\n      "];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/examples/vite-todoapp/src/graphql/graphql.ts b/examples/vite-todoapp/src/graphql/graphql.ts
index c2d5f26a..0041e355 100644
--- a/examples/vite-todoapp/src/graphql/graphql.ts
+++ b/examples/vite-todoapp/src/graphql/graphql.ts
@@ -14,6 +14,7 @@ export type Scalars = {
   Boolean: { input: boolean; output: boolean; }
   Int: { input: number; output: number; }
   Float: { input: number; output: number; }
+  Date: { input: any; output: any; }
 };
 
 export type MarkTodoDoneInput = {
@@ -43,6 +44,7 @@ export type Query = {
 
 export type Todo = {
   __typename?: 'Todo';
+  dueDate?: Maybe<Scalars['Date']['output']>;
   hasDone: Scalars['Boolean']['output'];
   id: Scalars['ID']['output'];
   name: Scalars['String']['output'];
@@ -50,8 +52,7 @@ export type Todo = {
 };
 
 export type TodoInput = {
-  hasDone?: InputMaybe<Scalars['Boolean']['input']>;
-  id?: InputMaybe<Scalars['ID']['input']>;
+  dueDate?: InputMaybe<Scalars['Date']['input']>;
   name: Scalars['String']['input'];
   priority: TodoPriority;
 };
@@ -77,7 +78,7 @@ export type CreateTodoMutation = { __typename?: 'Mutation', addTodo?: { __typena
 export type TodosQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type TodosQuery = { __typename?: 'Query', allTodos?: { __typename?: 'TodosCollection', collection: Array<{ __typename?: 'Todo', id: string, name: string, priority: TodoPriority, hasDone: boolean } | null> } | null };
+export type TodosQuery = { __typename?: 'Query', allTodos?: { __typename?: 'TodosCollection', collection: Array<{ __typename?: 'Todo', id: string, name: string, priority: TodoPriority, dueDate?: any | null, hasDone: boolean } | null> } | null };
 
 export type MarkTodoDoneMutationVariables = Exact<{
   input: MarkTodoDoneInput;
@@ -87,6 +88,6 @@ export type MarkTodoDoneMutationVariables = Exact<{
 export type MarkTodoDoneMutation = { __typename?: 'Mutation', markTodoDone?: { __typename?: 'Todo', id: string } | null };
 
 
-export const CreateTodoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createTodo"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"TodoInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addTodo"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<CreateTodoMutation, CreateTodoMutationVariables>;
-export const TodosDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"todos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allTodos"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"fabrixView"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"StringValue","value":"collection","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"config"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"label"},"value":{"kind":"StringValue","value":"Your tasks","block":false}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"StringValue","value":"collection.id","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"config"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"hidden"},"value":{"kind":"BooleanValue","value":true}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"StringValue","value":"collection.hasDone","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"config"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"label"},"value":{"kind":"StringValue","value":"Status","block":false}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"StringValue","value":"collection.actions","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"config"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"label"},"value":{"kind":"StringValue","value":"Actions","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"index"},"value":{"kind":"IntValue","value":"-1"}},{"kind":"ObjectField","name":{"kind":"Name","value":"componentType"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"StringValue","value":"IDActionCell","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"props"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"StringValue","value":"label","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"value"},"value":{"kind":"StringValue","value":"Done","block":false}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"StringValue","value":"color","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"value"},"value":{"kind":"StringValue","value":"blue","block":false}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"StringValue","value":"mutation","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"value"},"value":{"kind":"StringValue","value":"markTodoDone","block":false}}]}]}}]}}]}}]}]}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}},{"kind":"Field","name":{"kind":"Name","value":"hasDone"}}]}}]}}]}}]} as unknown as DocumentNode<TodosQuery, TodosQueryVariables>;
+export const CreateTodoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createTodo"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"TodoInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addTodo"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"fabrixForm"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<CreateTodoMutation, CreateTodoMutationVariables>;
+export const TodosDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"todos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allTodos"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"fabrixView"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}},{"kind":"Field","name":{"kind":"Name","value":"dueDate"}},{"kind":"Field","name":{"kind":"Name","value":"hasDone"}}]}}]}}]}}]} as unknown as DocumentNode<TodosQuery, TodosQueryVariables>;
 export const MarkTodoDoneDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"markTodoDone"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"MarkTodoDoneInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"markTodoDone"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<MarkTodoDoneMutation, MarkTodoDoneMutationVariables>;
\ No newline at end of file
diff --git a/examples/vite-todoapp/src/main.tsx b/examples/vite-todoapp/src/main.tsx
index 4fabf461..d779f27f 100644
--- a/examples/vite-todoapp/src/main.tsx
+++ b/examples/vite-todoapp/src/main.tsx
@@ -1,17 +1,12 @@
+import { createRoot } from "react-dom/client";
 import { StrictMode } from "react";
-import {
-  ComponentRegistry,
-  FabrixProvider,
-  gql,
-} from "@fabrix-framework/fabrix";
-import { ChakraUIRegistry } from "@fabrix-framework/chakra-ui";
-import { Provider as ChakraProvider } from "./components/ui/provider.tsx";
-import { IDActionCell } from "./components/IDActionCell.tsx";
+import { FabrixProvider, gql } from "@fabrix-framework/fabrix";
+import { UnstyledRegistry } from "@fabrix-framework/unstyled";
 import App from "./App.tsx";
 import "./index.css";
 import "./columns.css";
-import { createRoot } from "react-dom/client";
 
+/*
 const TodoAppComponents = new ComponentRegistry({
   custom: {
     unit: {
@@ -19,23 +14,22 @@ const TodoAppComponents = new ComponentRegistry({
     },
   },
 });
+*/
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <ChakraProvider>
-      <FabrixProvider
-        url={"http://localhost:8001/graphql"}
-        componentRegistry={ChakraUIRegistry.merge(TodoAppComponents)}
-        operationSchema={gql`
-          mutation markTodoDone($input: MarkTodoDoneInput!) {
-            markTodoDone(input: $input) {
-              id
-            }
+    <FabrixProvider
+      url={"http://localhost:8001/graphql"}
+      componentRegistry={UnstyledRegistry}
+      operationSchema={gql`
+        mutation markTodoDone($input: MarkTodoDoneInput!) {
+          markTodoDone(input: $input) {
+            id
           }
-        `}
-      >
-        <App />
-      </FabrixProvider>
-    </ChakraProvider>
+        }
+      `}
+    >
+      <App />
+    </FabrixProvider>
   </StrictMode>,
 );
diff --git a/packages/unstyled/src/components.tsx b/packages/unstyled/src/components.tsx
index aa0c94e9..476de882 100644
--- a/packages/unstyled/src/components.tsx
+++ b/packages/unstyled/src/components.tsx
@@ -60,16 +60,12 @@ const tableView = (props: TableComponentProps) => {
   );
 };
 
-const formView = (props: FormComponentProps) => {
-  return (
-    <div role="form">
-      {props.renderFields()}
-      {props.renderSubmit(({ submit }) => (
-        <button onClick={() => submit()}>Submit</button>
-      ))}
-    </div>
-  );
-};
+const formView = (props: FormComponentProps) => (
+  <form role="form" {...props.getAction()}>
+    {props.renderFields()}
+    <button type="submit">Submit</button>
+  </form>
+);
 
 const FormFieldWrapper = (
   props: React.PropsWithChildren<
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 069e6001..226794eb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,9 @@ importers:
       '@fabrix-framework/fabrix':
         specifier: workspace:*
         version: link:../../packages/fabrix
+      '@fabrix-framework/unstyled':
+        specifier: workspace:*
+        version: link:../../packages/unstyled
       graphql:
         specifier: ^16.9.0
         version: 16.10.0