Kitium UI - Advanced VSCode Extension
A powerful VSCode extension for the Kitium UI component library, providing intelligent autocomplete for 45+ components, framework detection, snippets, and live preview with automatic framework-specific examples.
✨ Features
1. 🎯 Framework Auto-Detection
- Automatically detects your project framework (React, Vue, Angular, Svelte, Next.js, Nuxt, or Web)
- Reads
package.json dependencies to identify framework
- Shows framework-specific import statements
- Provides framework-specific event handler suggestions (onClick, @click, (click), etc.)
- Smart caching for optimal performance
Supported Frameworks:
- ✅ React →
@kitiumai/ui/react
- ✅ Vue 3 →
@kitiumai/ui/vue
- ✅ Angular →
@kitiumai/ui/angular
- ✅ Svelte →
@kitiumai/ui/svelte
- ✅ Next.js →
@kitiumai/ui/nextjs
- ✅ Nuxt →
@kitiumai/ui/vue
- ✅ Web Components →
@kitiumai/ui/web
2. 📦 45+ Component Snippets
Quick access snippets for all Kitium UI components across 8 categories:
Form Components (13): Button, Input, Select, Checkbox, Radio, Toggle, Slider, Autocomplete, Stepper, Segmented, Rating, Combobox, Textarea
Navigation (6): Tabs, Breadcrumb, Pagination, Dropdown, Menu, Accordion
Data Display (4): DataTable, Badge, Avatar, Timeline
Feedback (6): Toast, Toast Stack, Alert, Progress, Progress Circular, Skeleton
Overlay (4): Dialog, Tooltip, Popover, Modal
Content (8): Carousel, CodeBlock, FileUpload, Rich Text, Gallery, Header, List
Advanced (7): ColorPicker, TreeView, Kanban, Chart, Map, DatePicker, TimePicker
Surface (3): Card, Layout, Panel
3. 🧠 Intelligent Autocomplete
- 45+ components with full prop suggestions
- Framework-specific event handlers (React: onClick, Vue: @click, Angular: (click), etc.)
- Smart prop filtering by component type
- Required props highlighted with ⚠️
- Type suggestions for enum props
- Default values displayed inline
- Category grouping for easy discovery
Usage:
// Type <Kt to see all 45 components grouped by category
<Kt...
// Type prop name to see suggestions including framework-specific handlers
<KtButton v... // variant, value, @click (Vue), onClick (React), etc.
// Type = to see valid prop values
<KtButton variant="..." // primary, secondary, success, warning, error, info
4. 📖 Framework-Aware Hover Documentation
- Hover over any component to see complete documentation
- Shows framework-specific usage examples
- Displays prop types, descriptions, and default values
- Shows both framework-specific and Web Components examples
- Includes correct import statement for detected framework
- Lists component category and all available props
Hover Example:
KtButton Component
Button component with variants and sizes
Category: Form
Framework Example (React)
<KtButton variant="primary" onClick={() => console.log('clicked')} />
Web Components Example
<kt-button variant="primary">Click Me</kt-button>
Import
import { KtButton } from '@kitiumai/ui/react';
5. ⚡ Smart Component Insertion
- Command:
Kitium: Insert Component
- Interactive component selection menu
- Auto-inserts with framework-specific syntax
- Pre-filled common props
6. 👀 Live Component Preview
- Open preview panel with
Ctrl+Shift+K (Mac: Cmd+Shift+K)
- Visual representation of all 45 components
- Interactive component examples
- Copy-paste ready code snippets
7. 📍 Status Bar Integration
- Quick access button in status bar
- Click to open component preview
- Shows framework being used
🚀 Quick Start
Installation
- Install Kitium UI extension from VSCode marketplace
- Open any TypeScript, JavaScript, TSX, or JSX file
- Extension automatically detects your framework from
package.json
Using Snippets
// Type the component name and press Tab/Enter
kt-button<Tab>
// Results in (React example):
<kt-button variant="primary" size="medium">
Label
</kt-button>
Using Autocomplete
// Start typing component name
<KtBu... // Suggests KtButton
// Inside tag, type prop
<KtButton var... // Suggests variant (and framework-specific handlers)
// Type = for values
<KtButton variant="... // Shows: primary, secondary, success, warning, error, info
Using Hover Documentation
// Hover over component name or prop
<KtButton variant="primary">
↑ Hover here for full documentation with framework-specific examples
prop here ↑ Shows prop type, description, and valid values
📋 Complete Component Reference
| Component |
Props |
Use Case |
| KtButton |
variant, size, disabled, loading, fullWidth, type, icon |
Actions and submissions |
| KtInput |
type, placeholder, label, status, disabled, clearable |
Text input fields |
| KtSelect |
value, label, placeholder, multiple, searchable, size |
Dropdown selections |
| KtCheckbox |
checked, label, disabled, indeterminate |
Boolean toggles |
| KtRadioGroup |
value, label, disabled, direction |
Single selection from group |
| KtToggle |
checked, label, size, disabled |
Switch control |
| KtSlider |
value, min, max, step, label, disabled |
Range selection |
| KtAutocomplete |
value, placeholder, minChars, maxSuggestions, disabled |
Smart search input |
| KtStepper |
value, min, max, step, disabled |
Numeric increment/decrement |
| KtSegmented |
value, size, disabled |
Grouped selection control |
| KtRating |
value, max, readonly, disabled, size |
Star rating |
| KtCombobox |
value, placeholder, editable, creatable, disabled |
Filterable dropdown |
| KtTextarea |
value, rows, maxLength, showCharCount, resize |
Multi-line text input |
Navigation Components (6)
| Component |
Props |
Use Case |
| KtTabs |
activeTab, variant, size, scrollable |
Tab navigation |
| KtBreadcrumb |
separator, size |
Path navigation |
| KtPagination |
currentPage, totalPages, pageSize, showEdges |
Page navigation |
| KtDropdown |
trigger, placement, closeOnSelect |
Dropdown menus |
| KtMenu |
orientation, size, closeable |
Vertical/horizontal menus |
| KtAccordion |
activeItems, allowMultiple, closeOthers |
Collapsible sections |
Data Display (4)
| Component |
Props |
Use Case |
| KtDataTable |
columns, data, sortable, filterable, pageable |
Data in table format |
| KtBadge |
variant, size, closeable, icon |
Labels and tags |
| KtAvatar |
src, alt, initials, size, shape |
User images/initials |
| KtTimeline |
direction, alternating, size |
Chronological events |
Feedback Components (6)
| Component |
Props |
Use Case |
| KtToast |
type, message, duration, closeable, position |
Temporary notifications |
| KtToastStack |
position, maxToasts, spacing |
Toast container |
| KtAlert |
type, title, message, closeable, icon |
Alert messages |
| KtProgress |
value, variant, showLabel, striped |
Linear progress |
| KtProgressCircular |
value, variant, size, showLabel |
Circular progress |
| KtSkeleton |
variant, count, width, height, animated |
Loading placeholder |
Overlay Components (4)
| Component |
Props |
Use Case |
| KtDialog |
open, title, closeButton, size, backdrop |
Modal dialogs |
| KtTooltip |
content, placement, trigger, delay |
Hover help text |
| KtPopover |
title, content, placement, trigger, closeButton |
Floating content |
| KtModal |
open, closeButton, backdrop, closeOnEscape |
Full-screen overlay |
Content Components (8)
| Component |
Props |
Use Case |
| KtCarousel |
autoplay, autoplayDelay, showControls, showIndicators |
Image slider |
| KtCodeBlock |
code, language, showLineNumbers, copyable, theme |
Code display |
| KtFileUpload |
accept, multiple, disabled, maxSize, maxFiles |
File selection |
| KtRichText |
value, placeholder, readonly, height, toolbar |
Rich text editor |
| KtGallery |
columns, gap, showLightbox, aspectRatio |
Image gallery |
| KtHeader |
level, text, subtitle, size |
Headings |
| KtList |
items, ordered, size, striped |
List display |
Advanced Components (7)
| Component |
Props |
Use Case |
| KtColorPicker |
value, label, showAlpha, format, presets |
Color selection |
| KtTreeView |
items, expandAll, selectable, checkboxes |
Hierarchical data |
| KtKanban |
columns, items, draggable |
Task board |
| KtChart |
type, data, options, height, responsive |
Data visualization |
| KtMap |
center, zoom, markers, provider |
Map display |
| KtDatePicker |
value, label, minDate, maxDate, range, disabled |
Date selection |
| KtTimePicker |
value, label, format, step, disabled |
Time selection |
Surface Components (3)
| Component |
Props |
Use Case |
| KtCard |
title, subtitle, image, hoverable, clickable, shadow |
Content container |
| KtLayout |
header, sidebar, footer, sidebarWidth, direction |
Page layout |
| KtPanel |
title, collapsible, border, padding |
Section container |
🎯 Framework-Specific Examples
React
import { KtButton, KtInput } from '@kitiumai/ui/react';
<KtButton onClick={() => setCount(count + 1)}>
Click Me
</KtButton>
<KtInput value={name} onChange={(e) => setName(e.target.value)} />
Vue
import { KtButton, KtInput } from '@kitiumai/ui/vue';
<KtButton @click="increment">
Click Me
</KtButton>
<KtInput v-model="name" />
Angular
import { KtButtonModule, KtInputModule } from '@kitiumai/ui/angular';
<kt-button (click)="increment()">Click Me</kt-button>
<kt-input [(ngModel)]="name"></kt-input>
Svelte
import { KtButton, KtInput } from '@kitiumai/ui/svelte';
<KtButton on:click={increment}>Click Me</KtButton>
<KtInput bind:value={name} />
Web Components
import { KtButton, KtInput } from '@kitiumai/ui/web';
<kt-button onclick="increment()">Click Me</kt-button>
<kt-input onchange="updateName(event)"></kt-input>
⚙️ Commands
| Command |
Shortcut |
Description |
kitium.openPreview |
Ctrl+Shift+K |
Open component preview panel |
kitium.insertComponent |
- |
Insert component with interactive menu |
kitium.openDocs |
- |
Open official documentation |
🔧 Configuration
No configuration needed! The extension works automatically.
Optional VSCode settings:
{
"kitium.enableSnippets": true,
"kitium.enableAutocomplete": true,
"kitium.enablePreview": true,
"kitium.enableHover": true,
"kitium.cacheFrameworkInfo": true
}
🐛 Troubleshooting
Framework not detected
- Ensure your project has a
package.json with framework dependency
- Try closing and reopening the editor
- Framework cache is cleared every 5 minutes
Snippets not working
- File must be
.tsx, .ts, .jsx, or .js
- Enable snippets:
File > Preferences > User Snippets
Autocomplete issues
- Reload window:
Ctrl+Shift+P > Developer: Reload Window
- Ensure file has correct extension
- Check that Kitium UI extension is enabled
📚 Resources
📝 License
MIT License - See LICENSE file
🙏 Credits
Made with ❤️ by Kitium AI
Get Started Now! 🚀 Start typing <Kt to see all 45 components!
| |
