Block collectionsExplore · Preview · Build

Blocks for complete application layouts

Browse 27 reusable Kamod UI blocks across 4 collections. Compare complete layouts, try different themes and screen sizes in the live previews, and inspect the source before adding a variant to your Preact app. Each block brings existing components together into a working composition, giving you a starting point for navigation, authentication screens and application shells.

Start with the getting started guide, then use each variant’s Code tab and setup instructions for its files and dependencies. Reuse @kamod-ch/ui, connect your own data and routes, and refine the result with the component styles and theming guides. The available collections below are ready to explore; planned collections show what’s on the horizon and do not yet contain usable variants.

Available nowSource included

All block categories

Choose a collection that matches the screen you are building, then compare its variants for navigation, content placement and responsive behavior. Open any block to explore its live preview, source files and setup guide. The variant count shows how many layouts are available in each collection.

Start with the closest composition and follow its installation instructions before changing the layout. Keep the supplied files together, replace demo content with your own data, and connect routing or service callbacks in your app. The setup and theming guides below help you give every block the same Preact and styling foundation.

Planned collections20 planned categories

On the horizon

Explore the planned categories for future additions to the library, from content sections and marketing pages to checkout and community layouts. These entries show the intended collection structure; they do not yet include usable blocks or an installation guide.

Every planned collection currently has 0 variants. Its link is a placeholder, and the destination page is not available yet. For a layout you can use today, return to the available collections above and compare their previews and source files.

Setup & themingShared foundations

Make it your own

Set up once, reuse everywhere. These guides apply to individual components and complete blocks. Start with the global stylesheet and Tailwind CSS source detection, then choose your theme and finish with consistent icons. Following this order makes it easier to tell a setup issue from a change you want to make to the design.

Keep your app’s existing conventions and connect the shared foundation before overriding local classes. Each guide below focuses on one part of that setup and includes a quick visual check. Once the basics look right, use real content to review spacing, contrast and keyboard behavior in both light and dark modes.

Foundation01

Connect your styles

Connect Tailwind CSS, load the global styles and check source detection before your first render. Keep the stylesheet at your app’s entry point so every page shares the same foundation. When you copy a block into src/components, make sure its files are included in source detection so the classes used by the layout are generated.

Appearance02

Customize the theme

Choose a preset, explore light and dark modes, then adjust shared tokens with @kamod-ch/themes. Update --primary and other semantic tokens to carry your brand across the whole interface. Prefer shared tokens for recurring colors instead of restyling every component separately, and check muted text, borders and focus rings against your page background.

Details03

Explore the icon library

Complete navigation and actions with typed @kamod-ch/icons that inherit your interface’s colors. Import the icons you need and keep their size and stroke consistent across related controls. Pair unfamiliar actions with visible labels; when space calls for an icon-only button, give it an aria-label that describes the action.

Work with the source

A useful next step: read the piece you want to change. These two repositories cover the components and visual details behind the library. Check the README and the version in your package.json when comparing an example with your installed API.