Examples of how to use the framework with react/vue etc

Feature/component description

I can’t wait to put it into my vs code extension development, my webview uses react and I want to use these components in a jsx way instead of a template string, I didn’t find an answer in the documentation for this way

Use case

import { vsCodeBadge as VsCodeBadge } from '@vscode/webview-ui-toolkit/dist/dts/badge';

function Demo() {
  return <VsCodeBadge> demo </VsCodeBadge>
}

It seems to be not possible.

[hawkticehurst]

With all that said, there’s been some internal discussion, and based on what we’ve seen from the community experience thus far we’ve decided to experiment with having the toolkit take on the responsibility of wrapping the toolkit components.

We would ideally publish the wrapped components ourselves so that all of you might be able to consume them with an import syntax along these lines:

import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";

And hopefully, this will alleviate what has seemingly been a bit of a painful process to get React toolkit components working. More to come on this soon.

[hawkticehurst]

🎊 Toolkit package v0.9.0 just dropped today and now ships a set of React components!

Using the new components is as simple as importing the toolkit package into your project and just adding ‘/react’ to the end of the import path. For example:

import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';

Most of the original toolkit documentation should map 1:1 with the new React components, but dedicated documentation and sample extensions will be coming in the next few days.

This work also wraps up one of the last big milestones as we work towards a 1.0 release. From here on it’s just catching up on some important backlog issues, adding more documentation, and final polishing!