{ "id": "0b0eea3734988a658bf3b564", "source": "solid:solid-router", "type": "github-document", "title": "dynamic", "content": "---\ntitle: \u003cDynamic\u003e\norder: 5\nuse_cases: \u003e-\n dynamic components, conditional rendering, polymorphic components, runtime\n component selection, flexible ui, component switching\ntags:\n - dynamic\n - components\n - jsx\n - polymorphic\n - rendering\n - conditional\nversion: '1.0'\ndescription: \u003e-\n Render components dynamically at runtime with the Dynamic component. Perfect\n for polymorphic components and conditional component rendering.\n---\n\nThis component lets you insert an arbitrary Component or tag and passes the props through to it.\n\n```tsx\nimport { Dynamic } from \"solid-js/web\"\nimport type { JSX } from \"solid-js\"\n\nfunction Dynamic\u003cT\u003e(\n\tprops: T \u0026 {\n\t\tchildren?: any\n\t\tcomponent?: Component\u003cT\u003e | string | keyof JSX.IntrinsicElements\n\t}\n): () =\u003e JSX.Element\n```\n\nHere's an example of how you can use it:\n\n```tsx\n\u003cDynamic component={MyComponent} someProp={state.something} /\u003e\n```\n\n## Props\n\n| Name | Type | Description |\n| :---------- | :---------------------------------------------------------- | :---------------------------------------- |\n| `component` | `Component\u003cT\u003e` \\| `string` \\| `keyof JSX.IntrinsicElements` | The component to render. |\n| `children` | `any` | The children to pass to the component. |\n| `...` | `T` | Any other props to pass to the component. |", "url": "file:///tmp/devour-github-216944658/src/routes/reference/components/dynamic.mdx", "metadata": { "path": "/tmp/devour-github-216944658/src/routes/reference/components/dynamic.mdx", "repo": "solidjs/solid-docs", "repo_url": "https://github.com/solidjs/solid-docs.git", "size": 1510, "source_type": "github" }, "hash": "4c234ef649a66d638dffb352ddf993cabf14553245b376ed2d18ee5e17c94744", "timestamp": "2026-02-23T11:39:22.43921512+01:00" }