Components
Once a Delta Components UI component is installed, you can import it and use it in your application like any other React component. The components are added as part of your codebase (not hidden in a library), so you can edit the components to suit your specific needs.
Standard Usage
Once installed, Delta Components live in your codebase. Import them directly:
import { Admonition } from "@/components/ui/admonition"
export default function Page() {
return (
<Admonition type="warning" title="Note">
Your custom warning message here.
</Admonition>
)
}Composite Components
Some components, like LLM Chat, are composed of multiple sub-components or require specific hooks.
When installing these larger patterns via CLI:
- Check the Output: The CLI may install multiple files (e.g., hooks, types, and UI sub-components).
- Review the Docs: Specific implementation details (like API routes for Chat) will be on the component's specific documentation page, or detailed as a comment in the code.
- Use Example Code: Copy the example code from the component's docs page and paste it into your application to get started.
AI-Assisted Implementation
Since you own the code, you can use the "Copy Page" button on any component page to feed the context to an LLM (Claude, ChatGPT, etc.) to help you refactor or style the component before or after installation.
Build Better User Experiences
Discover open source components that make the difference in your applications. Copy, paste, and customize to create exceptional user interfaces.
Browse components