diff --git a/packages/noya-compiler/src/index.ts b/packages/noya-compiler/src/index.ts
index 2272bfc67..c3a981754 100644
--- a/packages/noya-compiler/src/index.ts
+++ b/packages/noya-compiler/src/index.ts
@@ -103,7 +103,6 @@ export interface CompilerConfiguration {
   name: string;
   ds: DS;
   designSystemDefinition: DesignSystemDefinition;
-  target: 'standalone' | 'codesandbox';
 }
 
 function findElementNameAndSource(
@@ -208,7 +207,7 @@ export function createSimpleElement(
 
 export function createReactComponentDeclaration(
   name: string,
-  resolvedElement: SimpleElement,
+  returnValue: ts.Expression,
   params: ts.ParameterDeclaration[] = [],
 ) {
   return ts.factory.createFunctionDeclaration(
@@ -221,9 +220,7 @@ export function createReactComponentDeclaration(
     undefined,
     params,
     undefined,
-    ts.factory.createBlock([
-      ts.factory.createReturnStatement(createElementCode(resolvedElement)),
-    ]),
+    ts.factory.createBlock([ts.factory.createReturnStatement(returnValue)]),
   );
 }
 
@@ -325,6 +322,80 @@ function extractImports(
   });
 }
 
+function createLayoutSource(DesignSystem: DesignSystemDefinition) {
+  const providerElement = DesignSystem.components[component.id.Provider]
+    ? DesignSystem.createElement(
+        DesignSystem.components[component.id.Provider],
+        {
+          theme: createPassthrough(ts.factory.createIdentifier('theme')),
+        },
+        createPassthrough(
+          ts.factory.createJsxExpression(
+            undefined,
+            ts.factory.createPropertyAccessExpression(
+              ts.factory.createIdentifier('props'),
+              ts.factory.createIdentifier('children'),
+            ),
+          ),
+        ),
+      )
+    : null;
+
+  const nextProviderElement = DesignSystem.components[component.id.NextProvider]
+    ? DesignSystem.createElement(
+        DesignSystem.components[component.id.NextProvider],
+        {},
+        providerElement,
+      )
+    : providerElement;
+
+  if (!nextProviderElement) return;
+
+  const layoutElement = createSimpleElement(nextProviderElement, DesignSystem);
+
+  if (!layoutElement) return;
+
+  const layoutComponentFunc = createReactComponentDeclaration(
+    'NextProvider',
+    createElementCode(layoutElement),
+    [
+      ts.factory.createParameterDeclaration(
+        undefined,
+        undefined,
+        ts.factory.createIdentifier('props'),
+        undefined,
+        // Type React.PropsWithChildren<{}>
+        ts.factory.createTypeReferenceNode(
+          ts.factory.createIdentifier('React.PropsWithChildren'),
+          [
+            // Empty object type
+            ts.factory.createTypeLiteralNode([]),
+          ],
+        ),
+        undefined,
+      ),
+    ],
+  );
+
+  const layoutImports = extractImports(layoutElement, DesignSystem);
+
+  const layoutSource = [
+    "'use client'",
+    [
+      "import React from 'react'",
+      print(layoutImports),
+      'import { theme } from "./theme"',
+    ].join('\n'),
+    print(layoutComponentFunc),
+  ]
+    .map(clean)
+    .join('\n');
+
+  return {
+    source: layoutSource,
+  };
+}
+
 export function compile(configuration: CompilerConfiguration) {
   const DesignSystem = configuration.designSystemDefinition;
 
@@ -368,7 +439,7 @@ export function compile(configuration: CompilerConfiguration) {
 
       const func = createReactComponentDeclaration(
         getComponentNameIdentifier(component.name),
-        simpleElement,
+        createElementCode(simpleElement),
       );
 
       const dependencies = (DesignSystem.imports ?? []).reduce(
@@ -412,63 +483,7 @@ export function compile(configuration: CompilerConfiguration) {
     {},
   );
 
-  const layoutElement = createSimpleElement(
-    DesignSystem.createElement(
-      DesignSystem.components[component.id.NextProvider],
-      {},
-      DesignSystem.createElement(
-        DesignSystem.components[component.id.Provider],
-        {
-          theme: createPassthrough(ts.factory.createIdentifier('theme')),
-        },
-        createPassthrough(
-          ts.factory.createJsxExpression(
-            undefined,
-            ts.factory.createPropertyAccessExpression(
-              ts.factory.createIdentifier('props'),
-              ts.factory.createIdentifier('children'),
-            ),
-          ),
-        ),
-      ),
-    ),
-    DesignSystem,
-  );
-  const layoutComponentFunc = createReactComponentDeclaration(
-    'NextProvider',
-    layoutElement!,
-    [
-      ts.factory.createParameterDeclaration(
-        undefined,
-        undefined,
-        ts.factory.createIdentifier('props'),
-        undefined,
-        // Type React.PropsWithChildren<{}>
-        ts.factory.createTypeReferenceNode(
-          ts.factory.createIdentifier('React.PropsWithChildren'),
-          [
-            // Empty object type
-            ts.factory.createTypeLiteralNode([]),
-          ],
-        ),
-        undefined,
-      ),
-    ],
-  );
-
-  const layoutImports = extractImports(layoutElement!, DesignSystem);
-
-  const layoutSource = [
-    "'use client'",
-    [
-      "import React from 'react'",
-      print(layoutImports),
-      'import { theme } from "./theme"',
-    ].join('\n'),
-    print(layoutComponentFunc),
-  ]
-    .map(clean)
-    .join('\n');
+  const layoutSource = createLayoutSource(DesignSystem);
 
   const theme: Theme = {
     colorMode: configuration.ds.config.colorMode ?? 'light',
@@ -480,6 +495,14 @@ export function compile(configuration: CompilerConfiguration) {
 
   const themeFile = generateThemeFile(DesignSystem, { theme });
 
+  const includeTailwindBase = configuration.ds.source.name === 'vanilla';
+
+  const tailwindLayers = [
+    ...(includeTailwindBase ? ['base'] : []),
+    'components',
+    'utilities',
+  ];
+
   const files = {
     'src/app/layout.tsx': `import './globals.css'
 
@@ -495,10 +518,9 @@ export default function RootLayout({
   )
 }
 `,
-    'src/app/globals.css': `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`,
+    'src/app/globals.css': tailwindLayers
+      .map((layer) => `@tailwind ${layer};`)
+      .join('\n'),
     ...Object.fromEntries(
       componentPageItems.map(({ name, source }) => [
         `src/app/components/${getComponentNameIdentifier(
@@ -509,7 +531,9 @@ export default function RootLayout({
       ]),
     ),
     'src/app/components/theme.ts': themeFile,
-    'src/app/components/layout.tsx': layoutSource,
+    ...(layoutSource
+      ? { 'src/app/components/layout.tsx': layoutSource.source }
+      : {}),
     'package.json': JSON.stringify(
       {
         name: sanitizePackageName(configuration.name),
diff --git a/packages/noya-component/src/renderResolvedNode.tsx b/packages/noya-component/src/renderResolvedNode.tsx
index 339b54f82..4205a0180 100644
--- a/packages/noya-component/src/renderResolvedNode.tsx
+++ b/packages/noya-component/src/renderResolvedNode.tsx
@@ -63,7 +63,7 @@ export function renderResolvedNode({
   dsConfig,
   system,
   stylingMode = 'inline',
-  theme,
+  noya,
 }: {
   containerWidth?: number;
   contentEditable: boolean;
@@ -73,7 +73,7 @@ export function renderResolvedNode({
   dsConfig: DSConfig;
   system: DesignSystemDefinition;
   stylingMode?: StylingMode;
-  theme?: any; // Passed into components as _theme
+  noya?: any; // Passed into components as _noya
 }) {
   return ResolvedHierarchy.map<ReactNode>(
     resolvedNode,
@@ -266,7 +266,7 @@ export function renderResolvedNode({
             element.componentID === component.id.Radio) && {
             label: transformedChildren,
           })}
-          {...(theme && { _theme: theme })}
+          {...(noya && { _noya: noya })}
         />
       );
     },
diff --git a/packages/noya-module-loader/src/ThumbnailDesignSystem.tsx b/packages/noya-module-loader/src/ThumbnailDesignSystem.tsx
index d48185805..e54764342 100644
--- a/packages/noya-module-loader/src/ThumbnailDesignSystem.tsx
+++ b/packages/noya-module-loader/src/ThumbnailDesignSystem.tsx
@@ -19,7 +19,7 @@ const handler = {
 };
 
 function getTheme(props: any) {
-  if (props._theme) return props._theme as Theme;
+  if (props._noya && props._noya.theme) return props._noya.theme as Theme;
 
   return undefined;
 }
diff --git a/packages/noya-module-loader/src/VanillaDesignSystem.tsx b/packages/noya-module-loader/src/VanillaDesignSystem.tsx
new file mode 100644
index 000000000..03fcef703
--- /dev/null
+++ b/packages/noya-module-loader/src/VanillaDesignSystem.tsx
@@ -0,0 +1,246 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+/* eslint-disable jsx-a11y/alt-text */
+import {
+  ButtonVariant,
+  DesignSystemDefinition,
+  Theme,
+  applyCommonProps,
+  component,
+  x,
+} from '@noya-design-system/protocol';
+import { DSConfig } from 'noya-api';
+import { filterTailwindClassesByLastInGroup } from 'noya-tailwind';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const handler = {
+  get(target: any, property: string | symbol): any {
+    if (property in target) return target[property];
+
+    return (props: any) => {
+      return <div {...applyCommonProps(props)} />;
+    };
+  },
+};
+
+function getTheme(props: any) {
+  if (props._noya && props._noya.theme) return props._noya.theme as Theme;
+  return undefined;
+}
+
+function getDSConfig(props: any): DSConfig {
+  if (props._noya && props._noya.dsConfig) return props._noya.dsConfig;
+  return { colorMode: 'light', colors: { primary: 'blue' } };
+}
+
+function parseClasses(classes: string | undefined) {
+  return classes?.split(/\s+/) ?? [];
+}
+
+function mergeClasses(
+  classes: (string | false)[],
+  className: string | undefined,
+) {
+  return filterTailwindClassesByLastInGroup(
+    [...classes, ...parseClasses(className)].filter(
+      (x): x is string => typeof x === 'string',
+    ),
+  ).join(' ');
+}
+
+const proxyObject = new Proxy(
+  {
+    [component.id.Box]: (props: any) => {
+      return <div {...applyCommonProps(props)} />;
+    },
+    [component.id.Card]: (props: any) => {
+      const className = mergeClasses(
+        [`rounded-lg`, `bg-white`, `border`, `border-gray-200`, `p-4`],
+        props.className,
+      );
+
+      return <div {...applyCommonProps({ ...props, className })} />;
+    },
+    [component.id.Button]: (props: any) => {
+      const config = getDSConfig(props);
+      const variant = (props.variant as ButtonVariant) ?? 'solid';
+
+      const className = mergeClasses(
+        [
+          `appearance-none`,
+          ...(variant === 'solid'
+            ? [
+                `bg-${config.colors.primary}-500`,
+                `hover:bg-${config.colors.primary}-400`,
+                `text-white`,
+                `shadow-sm`,
+              ]
+            : []),
+          ...(variant === 'outline'
+            ? [
+                `border`,
+                `border-${config.colors.primary}-500`,
+                `text-${config.colors.primary}-500`,
+                `hover:bg-${config.colors.primary}-50`,
+                `hover:text-${config.colors.primary}-700`,
+              ]
+            : []),
+          ...(variant === 'text'
+            ? [
+                `text-${config.colors.primary}-500`,
+                `hover:bg-${config.colors.primary}-50`,
+                `hover:text-${config.colors.primary}-700`,
+              ]
+            : []),
+          `rounded-md`,
+          `px-3.5`,
+          `py-2.5`,
+          `text-sm`,
+          `font-semibold`,
+        ],
+        props.className,
+      );
+
+      return <button {...applyCommonProps({ ...props, className })} />;
+    },
+    [component.id.Text]: (props: any) => {
+      const theme = getTheme(props);
+      const colorMode = theme?.colorMode || 'light';
+
+      const className = [
+        `text-${colorMode === 'light' ? 'black' : 'white'}`,
+        ...parseClasses(props.className),
+        props.variant === 'h1' && `text-5xl`,
+        props.variant === 'h2' && `text-4xl`,
+        props.variant === 'h3' && `text-3xl`,
+        props.variant === 'h4' && `text-2xl`,
+        props.variant === 'h5' && `text-xl`,
+        props.variant === 'h6' && `text-lg`,
+      ]
+        .filter(Boolean)
+        .join(' ');
+
+      return <span {...applyCommonProps({ ...props, className })} />;
+    },
+    [component.id.Link]: (props: any) => {
+      const config = getDSConfig(props);
+
+      const className = mergeClasses(
+        [
+          `text-${config.colors.primary}-500`,
+          `hover:text-${config.colors.primary}-400`,
+        ],
+        props.className,
+      );
+
+      return (
+        <a {...applyCommonProps({ ...props, className })} href={props.href} />
+      );
+    },
+    [component.id.Tag]: (props: any) => {
+      const config = getDSConfig(props);
+
+      const className = mergeClasses(
+        [
+          `inline-flex`,
+          `items-center`,
+          `px-2.5`,
+          `py-1`,
+          `rounded-full`,
+          `text-xs`,
+          `font-medium`,
+          `bg-${config.colors.primary}-200/50`,
+          // `border`,
+          // `border-${config.colors.primary}-900/10`,
+          `text-${config.colors.primary}-600`,
+        ],
+        props.className,
+      );
+
+      return <div {...applyCommonProps({ ...props, className })} />;
+    },
+    [component.id.Input]: (props: any) => {
+      const className = mergeClasses(
+        [
+          `block`,
+          `w-full`,
+          `rounded-md`,
+          `border-0`,
+          `px-4`,
+          `py-2`,
+          `text-gray-900`,
+          `shadow-sm`,
+          `ring-1`,
+          `ring-inset`,
+          `ring-gray-300`,
+          `placeholder:text-gray-400`,
+          `focus:ring-2`,
+          `focus:ring-inset`,
+          `focus:ring-indigo-600`,
+          `sm:text-sm`,
+          `sm:leading-6`,
+        ],
+        props.className,
+      );
+
+      return <input {...applyCommonProps({ ...props, className })} />;
+    },
+    [component.id.Image]: (props: any) => {
+      return <img {...applyCommonProps(props)} src={props.src} />;
+    },
+    [component.id.Avatar]: (props: any) => {
+      const theme = getTheme(props);
+
+      const className = mergeClasses(
+        [
+          `rounded-full`,
+          `flex`,
+          `items-center`,
+          `justify-center`,
+          'overflow-hidden',
+          `bg-${theme?.colorMode === 'light' ? 'gray-100' : 'gray-800'}`,
+          `text-${theme?.colorMode === 'light' ? 'gray-300' : 'gray-600'}`,
+        ],
+        props.className,
+      );
+
+      return (
+        <div {...applyCommonProps({ ...props, className })}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="relative w-full h-full translate-y-[12.5%]"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+      );
+    },
+    [component.id.Provider]: undefined,
+  },
+  handler,
+);
+
+export const VanillaDesignSystem: DesignSystemDefinition = {
+  version: '',
+  protocolVersion: '',
+  components: proxyObject,
+  themeTransformer: x.a('theme'),
+  createElement: React.createElement,
+  createRoot: (element: HTMLElement) => {
+    return {
+      render(node, options) {
+        ReactDOM.render(node as React.ReactElement, element);
+      },
+      unmount() {
+        ReactDOM.unmountComponentAtNode(element);
+      },
+    };
+  },
+  buildType: 'react',
+};
diff --git a/packages/noya-module-loader/src/index.ts b/packages/noya-module-loader/src/index.ts
index b27248441..a94614ac3 100644
--- a/packages/noya-module-loader/src/index.ts
+++ b/packages/noya-module-loader/src/index.ts
@@ -2,6 +2,7 @@ import fetch from 'cross-fetch';
 
 import { DesignSystemDefinition } from '@noya-design-system/protocol';
 import { ThumbnailDesignSystem } from './ThumbnailDesignSystem';
+import { VanillaDesignSystem } from './VanillaDesignSystem';
 import { DesignSystemCache } from './cache';
 
 const requireModule = () => {};
@@ -35,6 +36,7 @@ export async function loadDesignSystem(
   } = {},
 ): Promise<DesignSystemDefinition> {
   if (name === 'thumbnail') return ThumbnailDesignSystem;
+  if (name === 'vanilla') return VanillaDesignSystem;
 
   const { Function = window.Function, enableCache = true } = options;
 
diff --git a/packages/noya-tailwind/src/suggestions.ts b/packages/noya-tailwind/src/suggestions.ts
index e19edd26e..fe3b70048 100644
--- a/packages/noya-tailwind/src/suggestions.ts
+++ b/packages/noya-tailwind/src/suggestions.ts
@@ -123,6 +123,7 @@ export const suggestionPatterns = [
   'isolation-auto',
   'z-{zIndex}',
   '-z-{zIndex}',
+  'appearance-none',
 ];
 
 export const context = {
diff --git a/packages/noya-tailwind/src/tailwind.ts b/packages/noya-tailwind/src/tailwind.ts
index 2e029a746..fea4d8237 100644
--- a/packages/noya-tailwind/src/tailwind.ts
+++ b/packages/noya-tailwind/src/tailwind.ts
@@ -57,6 +57,7 @@ export function getTextAlign(hashtags: string[]) {
 }
 
 export const classGroups = {
+  appearance: /^appearance-none/,
   fontSize: /^(text-base|text-sm|text-xs)/,
   fontWeight:
     /^(font-thin|font-extralight|font-light|font-normal|font-medium|font-semibold|font-bold|font-extrabold|font-black)$/,
@@ -87,6 +88,7 @@ export const classGroups = {
   right: /^right-/,
   bottom: /^bottom-/,
   left: /^left-/,
+  // translate: /^translate-/,
   // Only handle gap for now. Space-x and space-y are converted to gap.
   gap: /^(gap-|space-y|space-x)/,
   padding: /^p-/,
@@ -303,6 +305,10 @@ export const resolveTailwindClass = memoize(function resolveTailwindClass(
   const classGroup = getTailwindClassGroup(className);
 
   switch (classGroup) {
+    case 'appearance':
+      return {
+        appearance: 'none',
+      };
     case 'fontSize':
       // Not used?
       return {};
diff --git a/packages/site/src/dseditor/ControlledFrame.tsx b/packages/site/src/dseditor/ControlledFrame.tsx
index d11740941..c436b1512 100644
--- a/packages/site/src/dseditor/ControlledFrame.tsx
+++ b/packages/site/src/dseditor/ControlledFrame.tsx
@@ -79,14 +79,8 @@ export const ControlledFrame = memo(
 
     const style = useMemo(() => ({ width: '100%', height: '100%' }), []);
 
-    return (
-      <iframe
-        ref={handleRef}
-        tabIndex={-1}
-        title={title}
-        style={style}
-        // Ensure html5 doctype for proper styling
-        srcDoc={`<!DOCTYPE html>
+    // Ensure html5 doctype for proper styling
+    const srcDoc = `<!DOCTYPE html>
 <head>
   <style>
     html, body, #noya-preview-root { height: 100%; margin: 0; padding: 0; }
@@ -191,8 +185,17 @@ export const ControlledFrame = memo(
       }
     });
   </script>
+  <script src="https://cdn.tailwindcss.com"></script>
 </body>
-`}
+`;
+
+    return (
+      <iframe
+        ref={handleRef}
+        tabIndex={-1}
+        title={title}
+        style={style}
+        srcDoc={srcDoc}
       />
     );
   }),
diff --git a/packages/site/src/dseditor/DSEditor.tsx b/packages/site/src/dseditor/DSEditor.tsx
index 156a4df3e..264449d5f 100644
--- a/packages/site/src/dseditor/DSEditor.tsx
+++ b/packages/site/src/dseditor/DSEditor.tsx
@@ -679,7 +679,6 @@ function DSGalleryCode({
     const output = compile({
       name: 'Gallery',
       ds,
-      target: 'standalone',
       designSystemDefinition: system,
     });
 
diff --git a/packages/site/src/dseditor/DSProjectInspector.tsx b/packages/site/src/dseditor/DSProjectInspector.tsx
index 44ac61dc2..8f78bd475 100644
--- a/packages/site/src/dseditor/DSProjectInspector.tsx
+++ b/packages/site/src/dseditor/DSProjectInspector.tsx
@@ -28,9 +28,10 @@ import { downloadBlob } from '../utils/download';
 import { DSThemeInspector } from './DSThemeInspector';
 
 const designSystems = {
-  '@noya-design-system/mui': 'Material Design',
-  '@noya-design-system/antd': 'Ant Design',
+  vanilla: 'None',
   '@noya-design-system/chakra': 'Chakra UI',
+  '@noya-design-system/antd': 'Ant Design',
+  '@noya-design-system/mui': 'Material Design',
 };
 const noop = () => {};
 
diff --git a/packages/site/src/dseditor/DSRendererOverlay.tsx b/packages/site/src/dseditor/DSRendererOverlay.tsx
index 24c74c210..d685e3e02 100644
--- a/packages/site/src/dseditor/DSRendererOverlay.tsx
+++ b/packages/site/src/dseditor/DSRendererOverlay.tsx
@@ -103,6 +103,8 @@ export const DSRendererOverlay = memo(
           });
         }}
         onWheel={(event) => {
+          setHighlightRect(undefined);
+
           rendererRef.current?.mouseWheel({
             delta: {
               x: event.deltaX,
diff --git a/packages/site/src/dseditor/renderDSPreview.tsx b/packages/site/src/dseditor/renderDSPreview.tsx
index 9df15748a..e6533b3e3 100644
--- a/packages/site/src/dseditor/renderDSPreview.tsx
+++ b/packages/site/src/dseditor/renderDSPreview.tsx
@@ -26,8 +26,6 @@ export function renderDSPreview({
   isThumbnail?: boolean;
   chrome?: ComponentThumbnailChrome;
 }) {
-  // const system = isThumbnail ? ThumbnailDesignSystem : props.system;
-
   const content = renderResolvedNode({
     containerWidth: props.size.width,
     contentEditable: true,
@@ -36,7 +34,7 @@ export function renderDSPreview({
     resolvedNode,
     dsConfig,
     system: props.system,
-    theme: isThumbnail ? props.theme : undefined,
+    noya: { theme: props.theme, dsConfig },
   });
 
   const colorMode = dsConfig.colorMode ?? 'light';