A React components library for building webview-based extensions with React in Visual Studio Code.
npm install vscruiThe 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:
``bash`
npm install vscrui
> [!IMPORTANT]
> 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.
`tsx`
import { Badge, Button, Checkbox, Label, Tag } from "vscrui";
import "vscrui/dist/codicon.css"; // If using Icons
Badge
`tsx
import { Badge } from "vscrui";
`
Button
`tsx
import { Button } from "vscrui";
`
Checkbox
`tsx
import { Checkbox } from "vscrui";
onChange={(checked) => console.log(checked)}
>
Checkbox Label
`
Divider
`tsx
import { Divider } from "vscrui";
`
Dropdown
`tsx
import { Dropdown } from "vscrui";
value="Option 1"
onChange={(value) => console.log(value)}
/>
// With object 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";
`
Loader
`tsx
import { Loader } from "vscrui";
`
Pane
`tsx
import { Pane } from "vscrui";
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. Run
npm install
3. Run npm run storybook to start the development server
4. Open the http://localhost:6006` in your browserIf 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.
-
-
If you find this project useful, please consider becoming a sponsor to help Open Source sustainable. Thank you!