Once UI Snippets for VS Code

The official VS Code extension for Once UI — the open-source design system and component library built for Next.js.

Write 70% less code. Tab your way to production.

Features

🧩 60+ Code Snippets

Type a prefix and press Tab to instantly insert a fully-formed component.

Works in .tsx, .jsx, .ts, and .js files.

Example: Type ou-button → Tab

<Button variant="primary" size="m" onClick={handleClick}>Label</Button>

Example: Type ou-page-hero → Tab → Full hero section scaffold in seconds.

💡 IntelliSense / Prop Autocomplete

Type inside any Once UI JSX tag and get instant prop suggestions with value pickers.

<Button → shows all props: variant, size, prefixIcon, loading, disabled...
Enum props show a dropdown: variant="primary | secondary | tertiary | danger"
Required props are sorted to the top with a ⚠️ indicator
Every prop includes a description and a link to the docs

🔍 Hover Documentation

Hover over any Once UI component name to see:

Component description
Required props list
Optional props with types and allowed values
Direct link to the official documentation

⚡ Auto-Import

Never manually write import statements again.

Manual: Open Command Palette → Once UI: Fix Imports in Current File

This scans your file, detects every Once UI component in use, and automatically adds or updates the import line at the top.

On Save (optional): Enable in settings to run automatically on every save:

"once-ui.autoImportOnSave": true

Smart placement: Respects 'use client' directives — imports are placed correctly below them.

See your Once UI design tokens at a glance in the Explorer panel.

Colors: Brand and Accent swatches
Radius: Visual border-radius preview for each size token
Spacing: Bar preview for XS → XL spacing tokens
Typography: Font family names with live Aa preview

The sidebar automatically reads your project's config.ts file. If found, it shows your actual configured values. It refreshes automatically when config.ts changes.

To manually refresh: Command Palette → Once UI: Refresh Theme Preview

🖥️ CLI Integration

Run Once UI CLI commands directly from VS Code without touching the terminal.

Command	Description
`Once UI: Add Component`	Opens a searchable picker of all 35+ components and runs the CLI add command
`Once UI: Initialize Project`	Runs `npx once-ui-cli init` in your workspace root
`Once UI: List All Components`	Opens a full component reference table with docs links

All commands are available via Command Palette (Ctrl+Shift+P / Cmd+Shift+P) — search "Once UI".

Snippet Reference

Imports

Prefix	Output
`ou-import`	`import { ... } from '@once-ui-system/core'`

Buttons

Prefix	Description
`ou-button`	Basic button
`ou-button-icon`	Button with prefix icon
`ou-button-loading`	Button with loading state
`ou-button-disabled`	Button disabled
`ou-button-link`	Button as `<a>` link
`ou-button-full`	Button with all props
`ou-iconbutton`	Icon-only button
`ou-iconbutton-tooltip`	Icon button with tooltip
`ou-togglebutton`	Selectable toggle button
`ou-segmented`	Segmented control (tab switcher)

Badges & Labels

Prefix	Description
`ou-badge`	Pill badge
`ou-badge-icon`	Badge with icon and link
`ou-tag`	Colored tag
`ou-chip`	Filter chip
`ou-chip-remove`	Chip with remove button

Inputs & Forms

Prefix	Description
`ou-input`	Text input
`ou-input-error`	Input with error state
`ou-input-full`	Input with all props
`ou-textarea`	Multiline textarea
`ou-textarea-auto`	Auto-resize textarea
`ou-password`	Password input
`ou-numberinput`	Numeric input
`ou-otp`	OTP / verification code input
`ou-select`	Dropdown select
`ou-select-multi`	Searchable multi-select
`ou-checkbox`	Checkbox
`ou-switch`	Toggle switch
`ou-radio`	Radio button
`ou-slider`	Range slider
`ou-datepicker`	Date picker

Text & Typography

Prefix	Description
`ou-text`	Text with variant
`ou-heading`	Heading (h1–h6)
`ou-code`	InlineCode
`ou-kbd`	Keyboard shortcut (Kbd)

Layout

Prefix	Description
`ou-row`	Horizontal Row
`ou-column`	Vertical Column
`ou-grid`	CSS Grid
`ou-flex`	Flex container
`ou-card`	Card surface
`ou-card-link`	Card as link

Media & Identity

Prefix	Description
`ou-avatar`	User avatar (image)
`ou-avatar-initials`	User avatar (initials fallback)
`ou-avatar-status`	Avatar with status indicator
`ou-user`	User card (avatar + name + subline)

Feedback & Status

Prefix	Description
`ou-spinner`	Loading spinner
`ou-skeleton`	Skeleton loader
`ou-skeleton-group`	Skeleton group (3 lines)
`ou-progress`	Progress bar
`ou-status`	Status indicator dot
`ou-feedback`	Alert / notification banner
`ou-toast`	Toast notification
`ou-tooltip`	Tooltip

Overlays

Prefix	Description
`ou-dialog`	Dialog with footer buttons
`ou-modal`	Full-screen modal
`ou-accordion`	Collapsible accordion

Prefix	Description
`ou-navicon`	Hamburger/close toggle icon
`ou-timeline`	Vertical timeline

Effects & Animation

Prefix	Description
`ou-reveal`	Fade-in reveal animation
`ou-letterfx`	Scramble text effect
`ou-glitchfx`	Glitch animation
`ou-shinefx`	Text shimmer effect
`ou-tiltfx`	3D tilt on hover

Page Templates

Prefix	Description
`ou-page-hero`	Hero section (badge + heading + CTA)
`ou-page-auth`	Login / register page
`ou-page-dashboard`	Dashboard with stat cards

Settings

Setting	Type	Default	Description
`once-ui.autoImportOnSave`	boolean	`false`	Auto-fix imports on every file save
`once-ui.cliPath`	string	`npx once-ui-cli`	Custom CLI command or local path

To configure, open VS Code Settings (Ctrl+,) and search "Once UI".

Commands

All commands are accessible via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Command	Description
`Once UI: Fix Imports in Current File`	Auto-add missing imports
`Once UI: Add Component`	Add a component via CLI
`Once UI: Initialize Project`	Init Once UI in your project
`Once UI: List All Components`	Browse all components
`Once UI: Refresh Theme Preview`	Reload theme sidebar

Right-click shortcut: In any .tsx / .jsx file, right-click → "Once UI: Fix Imports in Current File"

Installation

From VS Code Marketplace

Search "Once UI Snippets" in the Extensions panel, or run:

ext install OnceUI.once-ui-snippets

From VSIX (manual)

Download once-ui-snippets.vsix
Open Extensions panel (Ctrl+Shift+X)
Click ⋯ → Install from VSIX...
Select the downloaded file

Contributing

Contributions are welcome! If you find a bug or want to suggest a new snippet, please open an issue or submit a pull request on GitHub.

Built by

_{Lorant One}
_{Once UI founder}

_Kadrxy
_{Extension developer}

Once UI Snippets

Once UI