Visual Studio Code - React UI Library (vscrui)

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.

Installation

To install the library, run the following command:

``bash npm install vscrui`

> [!IMPORTANT] > When using theIcon component, make sure to import the Codicon CSS file in your project. You can use the following import statement: import 'vscrui/dist/codicon.css';.

`Usage`

To use the library, import the components you need and use them in your React components.

`tsx import { Badge, Button, Checkbox, Label, Tag } from "vscrui"; import "vscrui/dist/codicon.css"; // If using Icons`

`$3`


Badge

`tsx import { Badge } from "vscrui";

99`


Button

`tsx import { Button } from "vscrui";


Checkbox

`tsx import { Checkbox } from "vscrui";

checked={true} onChange={(checked) => console.log(checked)} > Checkbox Label`


Divider

`tsx import { Divider } from "vscrui";


Dropdown

`tsx import { Dropdown } from "vscrui";

options={["Option 1", "Option 2", "Option 3"]} value="Option 1" onChange={(value) => console.log(value)} />

// With object options options={[ { label: "Option 1", value: "opt1" }, { label: "Option 2", value: "opt2" } ]} value="opt1" onChange={(value) => console.log(value)} />`


Icon

`tsx import { Icon } from "vscrui";


Label

`tsx import { Label } from "vscrui";

Label Text`


Loader

`tsx import { Loader } from "vscrui";


Pane

`tsx import { Pane } from "vscrui";

title="Pane Title" actions={[ { iconName: "refresh", onClick: () => console.log("Refresh") } ]} >

Pane Content


Panels (Tabs)

`tsx import { Panels } from "vscrui";

tabs={[ { id: "tab1", label: "Tab 1" }, { id: "tab2", label: "Tab 2" } ]} views={[ { id: "tab1", content:

Tab 1 Content

 },
    { id: "tab2", content: Tab 2 Content
 }
  ]}
/>


Table

`tsx import { Table, TableRow, TableCell } from "vscrui";


  
    Header 1
    Header 2
  
  
    Row 1 Col 1
    Row 1 Col 2

Tag

`tsx import { Tag } from "vscrui";

Tag Text`


TextArea

`tsx import { TextArea } from "vscrui";

placeholder="Enter text..." onChange={(value) => console.log(value)} > Label Text `


TextField

`tsx import { TextField } from "vscrui";

placeholder="Enter text..." onChange={(value) => console.log(value)} > Label Text`

`$3`

- [ ] Tooltip - [ ] Multi-select

`Development`

1. Clone the repository 2. Runnpm install3. Runnpm run storybookto start the development server 4. Open thehttp://localhost:6006` in your browser
5. Test out the components or make changes to the library

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.

References

-
-

Visual Studio Code - React UI Library (vscrui)

The vscrui is a React components library for building webview-based extensions with React in Visual Studio Code.

Installation

To install the library, run the following command:

``bash npm install vscrui`

> [!IMPORTANT] > When using theIcon component, make sure to import the Codicon CSS file in your project. You can use the following import statement: import 'vscrui/dist/codicon.css';.

`Usage`

To use the library, import the components you need and use them in your React components.

`tsx import { Badge, Button, Checkbox, Label, Tag } from "vscrui"; import "vscrui/dist/codicon.css"; // If using Icons`

`$3`


Badge

`tsx import { Badge } from "vscrui";

99`


Button

`tsx import { Button } from "vscrui";


Checkbox

`tsx import { Checkbox } from "vscrui";

checked={true} onChange={(checked) => console.log(checked)} > Checkbox Label`


Divider

`tsx import { Divider } from "vscrui";


Dropdown

`tsx import { Dropdown } from "vscrui";

options={["Option 1", "Option 2", "Option 3"]} value="Option 1" onChange={(value) => console.log(value)} />

// With object options options={[ { label: "Option 1", value: "opt1" }, { label: "Option 2", value: "opt2" } ]} value="opt1" onChange={(value) => console.log(value)} />`


Icon

`tsx import { Icon } from "vscrui";


Label

`tsx import { Label } from "vscrui";

Label Text`


Loader

`tsx import { Loader } from "vscrui";


Pane

`tsx import { Pane } from "vscrui";

title="Pane Title" actions={[ { iconName: "refresh", onClick: () => console.log("Refresh") } ]} >

Pane Content


Panels (Tabs)

`tsx import { Panels } from "vscrui";

tabs={[ { id: "tab1", label: "Tab 1" }, { id: "tab2", label: "Tab 2" } ]} views={[ { id: "tab1", content:

Tab 1 Content

 },
    { id: "tab2", content: Tab 2 Content
 }
  ]}
/>


Table

`tsx import { Table, TableRow, TableCell } from "vscrui";


  
    Header 1
    Header 2
  
  
    Row 1 Col 1
    Row 1 Col 2

Tag

`tsx import { Tag } from "vscrui";

Tag Text`


TextArea

`tsx import { TextArea } from "vscrui";

placeholder="Enter text..." onChange={(value) => console.log(value)} > Label Text `


TextField

`tsx import { TextField } from "vscrui";

placeholder="Enter text..." onChange={(value) => console.log(value)} > Label Text`

`$3`

- [ ] Tooltip - [ ] Multi-select

`Development`

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.

References

-
-

vscrui

Visual Studio Code - React UI Library (vscrui)

Installation

`Usage`

`$3`

`$3`

`Development`

Contributing

References

Sponsors

vscrui

Visual Studio Code - React UI Library (vscrui)

Installation

`Usage`

`$3`

`$3`

`Development`

Contributing

References

Sponsors

Dist Tags