docs

codesandbox · Mar 11, 2023 · fe437ab · fe437ab
1 parent 13c4509
commit fe437ab
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Sandpack } from "@codesandbox/sandpack-react/unstyled";
+import { Sandpack } from "@codesandbox/sandpack-react";
 import { githubLight, sandpackDark } from "@codesandbox/sandpack-themes";
 
 const Home: React.FC = () => {

diff --git a/examples/vite-react/App.jsx b/examples/vite-react/App.jsx
@@ -1,4 +1,4 @@
-import { Sandpack } from "@codesandbox/sandpack-react/unstyled";
+import { Sandpack } from "@codesandbox/sandpack-react";
 
 const App = () => {
   return (

diff --git a/website/docs/src/pages/getting-started/layout.mdx b/website/docs/src/pages/getting-started/layout.mdx
@@ -30,11 +30,19 @@ For this, sandpack uses a small package called [`classer`](https://github.com/co
 This pattern is compatible with most modern styling systems, including Tailwind, styled-components and emotion.
 </Callout>
 
-### TODO Bare components and remove runtime styling
+### Bare components, remove runtime styling or use unstyled components
 
-`@codesanbdox/sandpack-react` relies on [@stitches/core](https://github.com/stitchesjs/stitches) to style its component, which is almost zero-runtime CSS-in-JS framework. However, if you want to get rid of any runtime script or create your own style on top of Sandpack components, we provide a way to return bare components, which will eliminate all Sandpack CSS style.
+`@codesanbdox/sandpack-react` relies on [@stitches/core](https://github.com/stitchesjs/stitches) to style its component, which is almost zero-runtime CSS-in-JS framework. However, if you want to get rid of any runtime script or create your own style on top of Sandpack components, we provide a way to return unstyled components, which will eliminate all Sandpack CSS style.
 
-To do it, you need to pass `SANDPACK_BARE_COMPONENTS` environment variable (`NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS` for Nextjs) as `true`, which will remove the Stitches dependency, its execution and return only the HTML of the components.
+To do it, you need to consume the same components from the `unstyled` subfolder, which doesn't contain the Stitches dependency. For example: 
+
+```jsx
+import { Sandpack } from "@codesandbox/sandpack-react/unstyled";
+
+const App = () => {
+  return <Sandpack />
+};
+```
 
 ## Themes