AIRGAP StudioAirgap UI Library
Learn how to browse, preview, and insert code from 85 offline components with the UI Library.
Overview
AIRGAP UI Library is a component browser that lets you browse, preview, and insert code from 85 offline components. It operates without an LLM, and the total asset size is approximately 8MB.
Opening
Use the Ctrl+Shift+U shortcut or click the UI Library icon in the Activity Bar.
Browsing Components
Categories
85 components are organized into 10 categories.
| Category | Component Count | Examples |
|---|---|---|
| Layout | 12 | Container, Grid, Section, Flex, etc. |
| Navigation | 10 | Navbar, Tab, Breadcrumb, Pagination, etc. |
| Forms & Input | 13 | Input, Select, Textarea, Button, etc. |
| Content | 10 | Card, Table, List, Badge, etc. |
| Overlay & Popup | 7 | Modal, Offcanvas, Tooltip, Notification, etc. |
| Feedback | 7 | Spinner, Progress, Meter, Countdown, etc. |
| Media & Motion | 11 | Slideshow, Lightbox, Parallax, Animation, etc. |
| Styling | 15 | Utility, Visibility, Position, Transition, etc. |
Built-in Libraries
Three built-in component libraries are provided. Select a library from the TreeView sidebar on the left and browse its components.
Search
Use the search bar at the top to quickly search components by name.
Preview
Selected components are rendered in an isolated iframe. You can see an accurate preview without style conflicts.
- Use the light/dark mode toggle button to check appearance in both modes
- Full source code viewing supported
Code Insertion
Select a desired component from the preview, then insert the code.
| Method | Description |
|---|---|
| Copy Code | Copy code to clipboard |
| Insert at Cursor | Insert directly at the current editor cursor position |
Output format can be selected from HTML, JSX, or Vue.
Theme Customizer
Adjust the visual style of components in real time.
- Colors — Real-time adjustment of 15 color properties
- Border Radius — Component rounding
- Shadows — Shadow effect adjustment
- Font Size — Text size settings
- Dark/Light mode toggle
Changes are immediately reflected in all component previews.
TreeView Sidebar
Browse libraries and categories hierarchically from the left sidebar. The tree structure allows you to find components quickly.
Technical Specifications
| Item | Value |
|---|---|
| Total Asset Size | ~8MB |
| LLM Required | No |
| GPU/VRAM Required | No |
| Korean Font | Pretendard local bundle included |
Related Documentation
- Airgap Designer - AI UI Designer
- Airgap Bridge - Design token pipeline