# Layout Customization By default, Dashcode includes three predefined layouts. However, you can create new layouts based on your requirements. ### Adding a New Layout: Start by opening the layout.tsx file and adding your new layout using the provided code snippet. ```tsx filename="app/[locale]/layout.tsx" export default async function RootLayout({ children, params: { locale }, }: Readonly<{ children: React.ReactNode; params: { locale: string }; }>) { const messages = await getMessages(); const direction = getLangDir(locale); return ( {children} ); }; ``` ### Defining Your Layout: Once you've created your layout, define it in the use-config.ts file by following the code snippet provided. ```ts filename="hooks/use-config.ts" export type Config = { collapsed: boolean theme: string skin: 'default' | 'bordered' layout: layoutType sidebar: sidebarType menuHidden: boolean, showSearchBar: boolean, showSwitcher: boolean topHeader: 'default' | 'links' contentWidth: 'wide' | 'boxed' navbar: navBarType footer: 'sticky' | 'default' | 'hidden' isRtl: boolean subMenu: boolean hasSubMenu: boolean sidebarTheme: string, headerTheme: string, sidebarBgImage?: string radius: number } ```