Search documentation
Search pages, components, blocks, styles and colours.
You've created a new project with Fabricator UI.
Here are a few things you can do to get started building with Fabricator UI.
Add Components
Use the CLI to add components to your project.
Bare names resolve to the @fabricator registry, so add button installs @fabricator/button.
Then import and use it in your code.
import { Button } from "@/components/ui/button"
export default function Home() {
return <Button>Click me</Button>
}Fabricator UI adds the component source code directly to your project under components/ui/. You own the code and can change it however you want.
You can add multiple components at once or add all available components.
Browse all components on the Components page.
Customize Your Theme
You can edit your theme directly in your CSS file. Learn more about Theming and how to use CSS variables or utility classes.
To try a different preset, apply it to your project with its preset code.
Other Registries
You can also install items from other namespaced registries configured in your components.json. Namespaced names are passed through unchanged.
Learn more about registries and namespaces.
Use AI to Build
Your AI assistant can read the component source code in your project, understand the APIs, and compose them to build pages and features.
Here are some example prompts to try:
- "Create a signup page with a form for entering name, email and password."
- "Create a settings page with a form for updating profile information."
- "Build a dashboard with a header, stats cards, and a data table."
Connect the MCP Server
The Fabricator MCP server gives your AI assistant access to the @fabricator registry: browsing, search and installs. Connect it in your editor.
Learn more on the MCP Server page.