/vscode-community-ui-toolkit

Visual Studio Code - Community UI Toolkit

Primary LanguageCSSMIT LicenseMIT

Visual Studio Code - Community UI Toolkit

Warning

This project is in an early stage of development and not ready for production use.

The vscode-community-ui-toolkit is a web components library provided by the Visual Studio Code community for building webview-based extensions in Visual Studio Code.

Note

The library is based on the VS Code Webview UI Toolkit, which has announced to be deprecated on January 1, 2025. See the deprecation announcement for more details.

Join the community

Join the VS Code UI Toolkit Discord server to discuss the development of the vscode-community-ui-toolkit.

Contributing

If you want to contribute, please find an open issue you would like to work on and leave us a comment. If you have any questions, feel free to ask in the issue or in the Discord server.

Web Components

Check our issue list for the current status of the components.

Existing component support

  • badge
  • button
  • checkbox
  • data-grid
  • divider
  • dropdown
  • link
  • option
  • panels
  • progress-ring
  • radio
  • radio-group
  • tag
  • text-area
  • text-field

New components

  • icon
  • label
  • loader
  • ...

Local Development

  1. Clone the repository
  2. Run npm install
  3. Run npm run dev:start to start the development server
  4. Open the http://localhost:8000/dev/index.html in your browser

Todo

  • Project name
  • Add all components from the @vscode/webview-ui-toolkit package
  • Add documentation for all components
  • Add examples for all components
  • Release process
  • React support (separate package)
  • ...

References