Components that belong
in your project
Try a component, adjust its settings, and copy the code. Each one includes its implementation, styles, and an example for React or Next.js.
Choose your component
Open any component from Explore to try it in the sandbox. Adjust its settings and switch between preview and code without losing your configuration.
Copy the component
The Code tab contains Usage.tsx and Component.jsx. Copy Component.jsx into your project: it includes the component, styles, and engine. The example shows how to import it.
Check the dependencies
The viewer shows what each component needs. Koi pond and Streaming text work with React, without additional packages.
Make it part of your project
Copy the example alongside Component.jsx. In Koi pond, you can configure the fish count, height, appearance, and animation playback.
"use client";
import { Shoal } from "./Component";
export default function Example() {
return <Shoal count={2} seed={7} height={420} appearance="dark" />;
}Your design, your styles
Components keep their styles isolated with CSS Modules and, in the Koi pond engine, Shadow DOM. They do not need this website's fonts, variables, or classes.
You can edit the code to fit your interface. The configuration copied from the sandbox reflects the settings you choose.
Review your interface with Nibble Skill
Download the design guidelines so your assistant can identify readability, color, icon, and composition issues in your project.