The vscrui is a React components library for building webview-based extensions with React in Visual Studio Code.
Note
The library is based on the VS Code Webview UI Toolkit, which was deprecated on January 6, 2025. See the deprecation announcement for more details. Instead of providing web components, this library provides React components.
To install the library, run the following command:
npm install vscruiImportant
When using the Icon component, make sure to import the Codicon CSS file in your project. You can use the following import statement: import 'vscrui/dist/codicon.css';.
To use the library, import the components you need and use them in your React components.
import { Badge, Button, Checkbox, Label, Tag } from "vscrui";
import "vscrui/dist/codicon.css"; // If using IconsBadge
import { Badge } from "vscrui";
<Badge>99</Badge>Button
import { Button } from "vscrui";
<Button appearance="primary" onClick={() => console.log("Clicked")}>
Primary Button
</Button>
<Button appearance="secondary">
Secondary Button
</Button>
<Button appearance="icon" aria-label="Add">
<span className="codicon codicon-plus"></span>
</Button>Checkbox
import { Checkbox } from "vscrui";
<Checkbox
checked={true}
onChange={(checked) => console.log(checked)}
>
Checkbox Label
</Checkbox>Divider
import { Divider } from "vscrui";
<Divider />Dropdown
import { Dropdown } from "vscrui";
<Dropdown
options={["Option 1", "Option 2", "Option 3"]}
value="Option 1"
onChange={(value) => console.log(value)}
/>
// With object options
<Dropdown
options={[
{ label: "Option 1", value: "opt1" },
{ label: "Option 2", value: "opt2" }
]}
value="opt1"
onChange={(value) => console.log(value)}
/>Icon
import { Icon } from "vscrui";
<Icon name="add" />
<Icon name="refresh" spin />Label
import { Label } from "vscrui";
<Label>Label Text</Label>Loader
import { Loader } from "vscrui";
<Loader />Pane
import { Pane } from "vscrui";
<Pane
title="Pane Title"
actions={[
{ iconName: "refresh", onClick: () => console.log("Refresh") }
]}
>
<p>Pane Content</p>
</Pane>Panels (Tabs)
import { Panels } from "vscrui";
<Panels
tabs={[
{ id: "tab1", label: "Tab 1" },
{ id: "tab2", label: "Tab 2" }
]}
views={[
{ id: "tab1", content: <p>Tab 1 Content</p> },
{ id: "tab2", content: <p>Tab 2 Content</p> }
]}
/>Table
import { Table, TableRow, TableCell } from "vscrui";
<Table>
<TableRow isHeader>
<TableCell>Header 1</TableCell>
<TableCell>Header 2</TableCell>
</TableRow>
<TableRow>
<TableCell>Row 1 Col 1</TableCell>
<TableCell>Row 1 Col 2</TableCell>
</TableRow>
</Table>Tag
import { Tag } from "vscrui";
<Tag>Tag Text</Tag>TextArea
import { TextArea } from "vscrui";
<TextArea
placeholder="Enter text..."
onChange={(value) => console.log(value)}
>
Label Text
</TextArea>TextField
import { TextField } from "vscrui";
<TextField
placeholder="Enter text..."
onChange={(value) => console.log(value)}
>
Label Text
</TextField>- Tooltip
- Multi-select
- Clone the repository
- Run
npm install - Run
npm run storybookto start the development server - Open the
http://localhost:6006in your browser - Test out the components or make changes to the library
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.
- https://github.com/facebook/sapling/tree/main/addons/components
- https://github.com/microsoft/vscode-webview-ui-toolkit
If you find this project useful, please consider becoming a sponsor to help Open Source sustainable. Thank you!