Components are the fundamental building blocks of modern React applications. Think of them as LEGO pieces - small, self-contained units that you can combine to build complex interfaces.
Key characteristics of components:
Reusable - Write once, use everywhere in your application
Self-contained - Each component manages its own logic, styles, and behavior
Composable - Combine simple components to build complex features
Maintainable - Update in one place, changes reflect everywhere
In Onlook, components aren't just mockups or design artifacts - they're real React code that runs in production:
Traditional design tools (Figma, Sketch):
Components are visual representations
Need to be rebuilt in code by developers
Design and code can drift out of sync
Props are limited to variants and overrides
Onlook components:
Real React/Next.js components with actual code
What you see IS the production code
Visual and code changes sync instantly
Full TypeScript props with types and validation
Include logic, state, and interactivity
When you edit a component in one place, all instances update automatically. This is the power of component-based architecture.
Example: Button Component
// Button.tsx - The source component
export default function Button({ variant = 'primary', children }) {
return (
<button className={variant === 'primary' ? 'bg-blue-600' : 'bg-gray-600'}>
{children}
</button>
);
}Used in multiple places:
<Button variant="primary">Get Started</Button>
<Button variant="secondary">Learn More</Button>
<Button variant="primary">Contact Us</Button>Change the source, all instances update:
If you modify Button.tsx to add a hover effect, all three buttons across your app instantly get that effect. No need to manually update each instance.
This "single source of truth" approach is what makes component-based development so powerful for building scalable applications.
Component libraries give you professionally-designed, battle-tested components ready to use. Instead of building a button, form, table, etc, from scratch, install a library and start using production-ready components.
Save time - Don't reinvent the wheel
Professional quality - Designed by experts
Accessibility - Built-in ARIA labels and keyboard navigation
Consistency - Cohesive design system out of the box
Maintained - Bug fixes and updates from the community
All component libraries must be installed via the terminal. Once installed, Onlook automatically detects them and the AI can import and use components from the library.
Onlook can work with any package manager, but bun is its default as well as the fastest option for Next.js projects.
How to install a component package:
Click the terminal button to open it and switch to the terminal - main tab.
Install the component package you wish to use, for example bun add [package-name]
Once installed, Onlook automatically detects the new package and makes it available to the AI and your code.
Using AI to create components from installed packages:
Select an element or page, then prompt the AI (example using shadcn/ui):
Create a contact form using shadcn/ui Input, Textarea, and Button components.
Include validation for email field and a submit button with loading state.The AI understands which library you’re using and will import components correctly.
Onlook makes it easy to identify components through visual indicators in both the canvas and layers panel.
When you select elements on the canvas, Onlook displays different outlines based on the element type:
Component highlighting - purple outline
When you hover over or select a component instance:
Component boundary is clearly visible with a purple outline
Distinguishes components from regular HTML elements which are outlined in red.
Helps identify reusable components vs. one-off elements
The Layers panel shows your component hierarchy in a tree structure. Here's how to identify components:
Components appear in purple in the tree:
└── HomePage
├── Header - purple (component)
│ ├── Logo - purple (component)
│ └── Navigation - purple (component)
├── HeroSection - purple (component)
│ ├── Heading - red
│ ├── Description - red
│ └── Button - purple (component)
└── Footer - purple (component)Onlook works best with Tailwind-based component libraries because Tailwind classes can be edited visually. CSS-in-JS libraries have limited visual editing capabilities.
Why it's perfect:
- Tailwind CSS styling (fully editable in Onlook)
- Source code in your project (full control)
- No runtime dependencies
- Accessible by default
- TypeScript first
What it is:
Unstyled, accessible component primitives that you style yourself with Tailwind.
Why it's great for Onlook:
- No built-in styling (you add Tailwind styles)
- Handles complex behavior (accessibility, keyboard nav)
- Full visual editing since you control all styles
- shadcn/ui is built on Radix primitives
What it is:
Unstyled, accessible components from the creators of Tailwind CSS.
Why it works with Onlook:
- Designed to be styled with Tailwind
- Handles complex UI patterns (menus, dialogs, transitions)
- No CSS conflicts - you control everything
- Full visual editing in Onlook
What it is:
A beautiful, consistent icon library for React with 1000+ icons.
Why it's great:
- Lightweight and tree-shakeable
- Customizable with Tailwind (size, color, stroke)
- TypeScript support
- Works perfectly in Onlook