diff --git a/app/components/code-preview.tsx b/app/components/code-preview.tsx
index b3ad589ba..d57cff3cf 100644
--- a/app/components/code-preview.tsx
+++ b/app/components/code-preview.tsx
@@ -14,7 +14,7 @@ import { Tooltip } from '~/src';
 const reactElementToJSXStringOptions: Options = {
   filterProps: ['key', 'ref'],
   showFunctions: true,
-  sortProps: true,
+  useBooleanShorthandSyntax: false,
 };
 
 interface CodePreviewProps extends PropsWithChildren, ComponentProps<'div'> {
@@ -62,6 +62,7 @@ export const CodePreview: FC<CodePreviewProps> = ({
   code = deleteJSXSpaces(code);
   code = deleteSVGs(code);
   code = replaceWebpackImportsOnFunctions(code);
+  code = explicitTruthyPropsToShorthandSyntax(code);
   code = `'use client';
 
 import { ${importFlowbiteReact ?? firstComponentDisplayName(code)} } from 'flowbite-react';
@@ -231,3 +232,7 @@ const slugToUpperCamelCase = (str: string) => {
     .replaceAll(/\b[a-z]/g, (letter) => letter.toUpperCase())
     .replaceAll(/\s/g, '');
 };
+
+const explicitTruthyPropsToShorthandSyntax = (str: string) => {
+  return str.replaceAll(/={true}/g, '');
+};