var Component=(()=>{var mn=Object.create;var A=Object.defineProperty;var hn=Object.getOwnPropertyDescriptor;var bn=Object.getOwnPropertyNames;var pn=Object.getPrototypeOf,gn=Object.prototype.hasOwnProperty;var K=(u,t)=>()=>(t||u((t={exports:{}}).exports,t),t.exports),_n=(u,t)=>{for(var g in t)A(u,g,{get:t[g],enumerable:!0})},Pe=(u,t,g,v)=>{if(t&&typeof t=="object"||typeof t=="function")for(let y of bn(t))!gn.call(u,y)&&y!==g&&A(u,y,{get:()=>t[y],enumerable:!(v=hn(t,y))||v.enumerable});return u};var yn=(u,t,g)=>(g=u!=null?mn(pn(u)):{},Pe(t||!u||!u.__esModule?A(g,"default",{value:u,enumerable:!0}):g,u)),vn=u=>Pe(A({},"__esModule",{value:!0}),u);var Ee=K((Rn,we)=>{we.exports=React});var Re=K(G=>{"use strict";(function(){"use strict";var u=Ee(),t=Symbol.for("react.element"),g=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),y=Symbol.for("react.strict_mode"),H=Symbol.for("react.profiler"),J=Symbol.for("react.provider"),Z=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),I=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),C=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),Ce=Symbol.for("react.offscreen"),Q=Symbol.iterator,Oe="@@iterator";function je(e){if(e===null||typeof e!="object")return null;var n=Q&&e[Q]||e[Oe];return typeof n=="function"?n:null}var P=u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function m(e){{for(var n=arguments.length,r=new Array(n>1?n-1:0),a=1;a=1&&f>=0&&i[c]!==h[f];)f--;for(;c>=1&&f>=0;c--,f--)if(i[c]!==h[f]){if(c!==1||f!==1)do if(c--,f--,f<0||i[c]!==h[f]){var p=` `+i[c].replace(" at new "," at ");return e.displayName&&p.includes("")&&(p=p.replace("",e.displayName)),typeof e=="function"&&j.set(e,p),p}while(c>=1&&f>=0);break}}}finally{L=!1,M.current=d,Ve(),Error.prepareStackTrace=l}var E=e?e.displayName||e.name:"",N=E?O(E):"";return typeof e=="function"&&j.set(e,N),N}function Xe(e,n,r){return ue(e,!1)}function qe(e){var n=e.prototype;return!!(n&&n.isReactComponent)}function D(e,n,r){if(e==null)return"";if(typeof e=="function")return ue(e,qe(e));if(typeof e=="string")return O(e);switch(e){case I:return O("Suspense");case W:return O("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case k:return Xe(e.render);case C:return D(e.type,n,r);case Y:{var a=e,l=a._payload,d=a._init;try{return D(d(l),n,r)}catch{}}}return""}var T=Object.prototype.hasOwnProperty,ce={},fe=P.ReactDebugCurrentFrame;function F(e){if(e){var n=e._owner,r=D(e.type,e._source,n?n.type:null);fe.setExtraStackFrame(r)}else fe.setExtraStackFrame(null)}function ze(e,n,r,a,l){{var d=Function.call.bind(T);for(var s in e)if(d(e,s)){var i=void 0;try{if(typeof e[s]!="function"){var h=Error((a||"React class")+": "+r+" type `"+s+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[s]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw h.name="Invariant Violation",h}i=e[s](n,s,a,r,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(c){i=c}i&&!(i instanceof Error)&&(F(l),m("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",a||"React class",r,s,typeof i),F(null)),i instanceof Error&&!(i.message in ce)&&(ce[i.message]=!0,F(l),m("Failed %s type: %s",r,i.message),F(null))}}}var Be=Array.isArray;function V(e){return Be(e)}function Ke(e){{var n=typeof Symbol=="function"&&Symbol.toStringTag,r=n&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r}}function Ge(e){try{return me(e),!1}catch{return!0}}function me(e){return""+e}function he(e){if(Ge(e))return m("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Ke(e)),me(e)}var S=P.ReactCurrentOwner,He={key:!0,ref:!0,__self:!0,__source:!0},be,pe,U;U={};function Je(e){if(T.call(e,"ref")){var n=Object.getOwnPropertyDescriptor(e,"ref").get;if(n&&n.isReactWarning)return!1}return e.ref!==void 0}function Ze(e){if(T.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function Qe(e,n){if(typeof e.ref=="string"&&S.current&&n&&S.current.stateNode!==n){var r=_(S.current.type);U[r]||(m('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',_(S.current.type),e.ref),U[r]=!0)}}function en(e,n){{var r=function(){be||(be=!0,m("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",n))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}}function nn(e,n){{var r=function(){pe||(pe=!0,m("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",n))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}}var rn=function(e,n,r,a,l,d,s){var i={$$typeof:t,type:e,key:n,ref:r,props:s,_owner:d};return i._store={},Object.defineProperty(i._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(i,"_self",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.defineProperty(i,"_source",{configurable:!1,enumerable:!1,writable:!1,value:l}),Object.freeze&&(Object.freeze(i.props),Object.freeze(i)),i};function tn(e,n,r,a,l){{var d,s={},i=null,h=null;r!==void 0&&(he(r),i=""+r),Ze(n)&&(he(n.key),i=""+n.key),Je(n)&&(h=n.ref,Qe(n,l));for(d in n)T.call(n,d)&&!He.hasOwnProperty(d)&&(s[d]=n[d]);if(e&&e.defaultProps){var c=e.defaultProps;for(d in c)s[d]===void 0&&(s[d]=c[d])}if(i||h){var f=typeof e=="function"?e.displayName||e.name||"Unknown":e;i&&en(s,f),h&&nn(s,f)}return rn(e,i,h,l,a,S.current,s)}}var X=P.ReactCurrentOwner,ge=P.ReactDebugCurrentFrame;function w(e){if(e){var n=e._owner,r=D(e.type,e._source,n?n.type:null);ge.setExtraStackFrame(r)}else ge.setExtraStackFrame(null)}var q;q=!1;function z(e){return typeof e=="object"&&e!==null&&e.$$typeof===t}function _e(){{if(X.current){var e=_(X.current.type);if(e)return` Check the render method of \``+e+"`."}return""}}function an(e){{if(e!==void 0){var n=e.fileName.replace(/^.*[\\\/]/,""),r=e.lineNumber;return` Check your code at `+n+":"+r+"."}return""}}var ye={};function on(e){{var n=_e();if(!n){var r=typeof e=="string"?e:e.displayName||e.name;r&&(n=` Check the top-level render call using <`+r+">.")}return n}}function ve(e,n){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var r=on(n);if(ye[r])return;ye[r]=!0;var a="";e&&e._owner&&e._owner!==X.current&&(a=" It was passed a child from "+_(e._owner.type)+"."),w(e),m('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',r,a),w(null)}}function xe(e,n){{if(typeof e!="object")return;if(V(e))for(var r=0;r",i=" Did you accidentally export a JSX literal instead of a component?"):c=typeof e,m("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",c,i)}var f=tn(e,n,r,l,d);if(f==null)return f;if(s){var p=n.children;if(p!==void 0)if(a)if(V(p)){for(var E=0;E0?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}";if(!Ne[N+B]){var cn=b.length>0?"{"+b.join(": ..., ")+": ...}":"{}";m(`A props object containing a "key" prop is being spread into JSX: let props = %s; <%s {...props} /> React keys must be passed directly to JSX without using spread: let props = %s; <%s key={someKey} {...props} />`,B,N,cn,N),Ne[N+B]=!0}}return e===v?ln(f):sn(f),f}}var un=dn;G.Fragment=v,G.jsxDEV=un})()});var Se=K((Sn,Te)=>{"use strict";Te.exports=Re()});var wn={};_n(wn,{default:()=>Pn,frontmatter:()=>xn});var o=yn(Se()),xn={title:"In the making: Shadcn theme",description:"We're working on new theme that is using the all hyped Library UI Shadcn ui. The component library is currently all hyped by the React community and we bring it to XenForo!",image:"/images/blog/shadcn-theme.jpg",date:"2024-05-23",tags:["Theme","XenForo","Shadcn"],series:{order:1,title:"Themes"},authors:["splicho"]};function ke(u){let t=Object.assign({h2:"h2",p:"p",strong:"strong",img:"img",ul:"ul",li:"li",h3:"h3"},u.components);return(0,o.jsxDEV)(o.Fragment,{children:[(0,o.jsxDEV)(t.h2,{id:"introduction",children:"Introduction"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:17,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"When I was working on my personal portfolio, I had an idea to port the UI I was using over to XenForo. Since the UI Library was for React components and XenForo doesn't support React, it was initially challenging to adapt it."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:19,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"After persistent effort and research, we figured out a way to make it work with XenForo."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:21,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:["The ",(0,o.jsxDEV)(t.strong,{children:"Shadcn UI"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:23,columnNumber:5},this)," Library has a very calm and subtle design, featuring dark colors and nice accent colors. It's known for its simplicity and minimalism. There's no XenForo theme out there with the same features as Shadcn."]},void 0,!0,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:23,columnNumber:1},this),` `,(0,o.jsxDEV)(t.h2,{id:"index",children:"Index"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:25,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:(0,o.jsxDEV)(t.img,{src:"/images/blog/shadcn/shadcn-index.jpg",alt:"Shadcn Index"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:26,columnNumber:1},this)},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:26,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"The index was completely redesigned from scratch. We added a welcoming hero section that displays a heading, a forum description, and the five most recent (customizable) registered members. This hero section features a unique background animation with flying particles, making it more attractive and engaging for visitors."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:28,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"Additionally, the node list has been streamlined to show only the essentials: node names, subnodes, and node extras like avatars, thread names, and post counters. We removed everything else to maintain a clean and simple design."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:30,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"If you feel the need to reintroduce elements like the Node Description, there's no need to worry! You can easily add them back through the Style Properties of our theme. This gives you the flexibility to customize the appearance and content of your forum according to your preferences without any hassle."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:32,columnNumber:1},this),` `,(0,o.jsxDEV)(t.h2,{id:"authentication",children:"Authentication"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:34,columnNumber:1},this),` `,(0,o.jsxDEV)("p",{className:"leading-8 [&:not(:first-child)]:mt-6",children:(0,o.jsxDEV)("video",{className:"rounded-md border",controls:!0,loop:!0,children:(0,o.jsxDEV)("source",{src:"/images/blog/shadcn/login.webm",type:"video/webm"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:37,columnNumber:3},this)},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:36,columnNumber:1},this)},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:35,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"The Login and Register page underwent a complete redesign, featuring a split-screen layout. On the left side, you'll find the traditional login form, while the right side showcases customizable images sliding through."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:42,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"This design approach was chosen to align with modern trends, providing users with an engaging and visually appealing experience. The split-screen layout offers a balance between functionality and aesthetics, catering to the expectations of contemporary web users."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:44,columnNumber:1},this),` `,(0,o.jsxDEV)(t.h2,{id:"postbit",children:"Postbit"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:46,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:(0,o.jsxDEV)(t.img,{src:"/images/blog/shadcn/shadcn-postbit.jpg",alt:"Shadcn Postbit"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:47,columnNumber:1},this)},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:47,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"The postbit has been given a fresh, distinctive appearance to set it apart from other designs. Instead of the conventional vertical layout, we opted for a horizontal layout to create a unique look. The redesigned postbit includes the following displays:"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:49,columnNumber:1},this),` `,(0,o.jsxDEV)(t.ul,{children:[` `,(0,o.jsxDEV)(t.li,{children:"Post, Like, Thread and Credit counters"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:51,columnNumber:1},this),` `,(0,o.jsxDEV)(t.li,{children:"Single userbar of primary usergroup"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:52,columnNumber:1},this),` `,(0,o.jsxDEV)(t.li,{children:"Vouch and Reputation displays"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:53,columnNumber:1},this),` `,(0,o.jsxDEV)(t.li,{children:"Years of Service hexagon style, will change shape and colors based on account age."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:54,columnNumber:1},this),` `,(0,o.jsxDEV)(t.li,{children:"Award collection"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:55,columnNumber:1},this),` `]},void 0,!0,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:51,columnNumber:1},this),` `,(0,o.jsxDEV)(t.h2,{id:"direct-messaging",children:"Direct Messaging"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:57,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:(0,o.jsxDEV)(t.img,{src:"/images/blog/shadcn/shadcn-dm.jpg",alt:"Shadcn DM"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:58,columnNumber:1},this)},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:58,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"Direct messaging other users has been transformed into a visually stunning and user-friendly experience. The messaging system now resembles a real messaging app, complete with speech bubbles aligned to the left and right for easy conversation flow."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:60,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"To enhance usability, we introduced the Chat Participants feature at the top left corner, allowing you to quickly see who is participating in the conversation at any given time. Additionally, message read and delivered check marks have been incorporated, providing real-time feedback on the status of your messages, ensuring seamless communication."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:62,columnNumber:1},this),` `,(0,o.jsxDEV)(t.h3,{id:"search-messages",children:"Search Messages"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:63,columnNumber:1},this),` `,(0,o.jsxDEV)("p",{className:"leading-8 [&:not(:first-child)]:mt-6",children:(0,o.jsxDEV)("video",{className:"rounded-md border",controls:!0,loop:!0,children:(0,o.jsxDEV)("source",{src:"/images/blog/shadcn/dm.webm",type:"video/webm"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:66,columnNumber:3},this)},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:65,columnNumber:1},this)},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:64,columnNumber:1},this),` `,(0,o.jsxDEV)(t.p,{children:"With one of our included addons, searching for messages in real-time has never been easier. This feature ensures a seamless search experience, allowing users to find the information they need quickly and efficiently. Whether you're looking for specific messages or trying to locate a particular conversation, our addon makes it simple to search through your messages with ease."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:71,columnNumber:1},this),` `,(0,o.jsxDEV)("div",{class:"bg-blue-100 border-t border-b border-blue-500 mt-2 text-blue-700 px-4 py-3",role:"alert",children:[(0,o.jsxDEV)("p",{class:"font-bold",children:"Info:"},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:74,columnNumber:3},this),(0,o.jsxDEV)("p",{class:"text-sm",children:"We'll gradually expand the documentation with more information and features as development progresses."},void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:75,columnNumber:3},this)]},void 0,!0,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:73,columnNumber:1},this)]},void 0,!0,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx",lineNumber:1,columnNumber:1},this)}function Nn(u={}){let{wrapper:t}=u.components||{};return t?(0,o.jsxDEV)(t,Object.assign({},u,{children:(0,o.jsxDEV)(ke,u,void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx"},this)}),void 0,!1,{fileName:"/home/users/synapsethemes/Portfolio/content/blog/_mdx_bundler_entry_point-b3249d2d-1c13-488e-a3af-387dcd2d50e2.mdx"},this):ke(u)}var Pn=Nn;return vn(wn);})(); /*! Bundled license information: react/cjs/react-jsx-dev-runtime.development.js: (** * @license React * react-jsx-dev-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */ ;return Component;

BlogIn August 2023, we created and started the studio Synapse-Themes, mostly regarding theme and addon development for Xenforo. On our blog, We have written 1 items in total. In the search box below, you can look for articles by title.

Blog

In the making: Shadcn theme

Blog
In August 2023, we created and started the studio Synapse-Themes, mostly regarding theme and addon development for Xenforo. On our blog, We have written 1 items in total. In the search box below, you can look for articles by title.