How to Build Custom Components in Kyre

Last updated:

Why Use Custom Components?

Sometimes your needs go beyond what a template or block can do. With Kyre, you're not limited to no-code solutions — you can drop in full components written in Astro or SolidJS. This lets you create dynamic experiences like interactive charts, tabs, modals, and even fully reactive dashboards, all within your Kyre site.

javascript

      export default function MyComponent() {
  return <div class="p-4 rounded shadow">Hello from my custom block!</div>
}

How To Integrate

To use a custom component, upload it to the `components/` folder of your site and reference it in your module JSON. Kyre will automatically bundle and render it as part of your page at build time. You can use props, conditionals, loops, and all the power of your favorite framework.

Note On Build Time

Custom components increase build time slightly, especially if they rely on dynamic imports or third-party packages. Keep your components modular and performant.

← About Kyre.io

developer docs →