# Vesper > Vesper is Tenstorrent's design system for the web: a React component library built on a shared set of design tokens, with light and dark themes, an icon set, and first-class Tailwind support. Each link below returns the raw Markdown source of a documentation page. For the full text of every page in a single request, see https://vesper.tenstorrent.com/llms-full.txt ## High-level documentation - [Getting Started](https://vesper.tenstorrent.com/getting-started.md): Install Vesper and set it up in a React application. - [Tokens](https://vesper.tenstorrent.com/tokens.md): How to use the CSS variables that Vesper is built with - [Usage with Agents](https://vesper.tenstorrent.com/agents.md): Published resources for coding agents working with Vesper ## Components - [Accordion](https://vesper.tenstorrent.com/components/accordion.md): A collapsible content panel that toggles between expanded and collapsed states. - [Admonition](https://vesper.tenstorrent.com/components/admonition.md): A callout component for highlighting important information, warnings, errors, or success messages. - [Avatar](https://vesper.tenstorrent.com/components/avatar.md): A circular image component for representing users or entities. - [Avatar Group](https://vesper.tenstorrent.com/components/avatar-group.md): Displays a stacked row of avatars with an overflow indicator when more than three are provided. - [Badge](https://vesper.tenstorrent.com/components/badge.md): A small labeling component used to highlight status, categories, or metadata. - [Button](https://vesper.tenstorrent.com/components/button.md): A versatile, polymorphic button component supporting multiple sizes, visual variants, and optional leading or trailing icons. - [Checkbox](https://vesper.tenstorrent.com/components/checkbox.md): A form checkbox input with text, supporting checked, unchecked, and indeterminate states. - [Chip](https://vesper.tenstorrent.com/components/chip.md): A compact, interactive element used for filtering, tagging, or toggling selections. - [Choicebox](https://vesper.tenstorrent.com/components/choicebox.md): A card-style selection component supporting both single-select and multi-select modes. - [Code](https://vesper.tenstorrent.com/components/code.md): An inline code component for displaying short code snippets or technical terms within running text. - [Code Block](https://vesper.tenstorrent.com/components/code-block.md): A syntax-highlighted code block component powered by Shiki. - [Combobox](https://vesper.tenstorrent.com/components/combobox.md): A form-ready, searchable select component that filters a list of options as the user types. - [Form Input Message](https://vesper.tenstorrent.com/components/form-input-message.md): A message displayed alongside a form input, rendered as a live region so updates are announced by screen readers. - [Icon Button](https://vesper.tenstorrent.com/components/icon-button.md): A button component that renders a single icon without text. - [Icons](https://vesper.tenstorrent.com/components/icons.md): A library of SVG icon components used throughout Vesper. - [Material](https://vesper.tenstorrent.com/components/material.md): A surface component that provides visual depth and structure through different elevation and border styles. - [Menu](https://vesper.tenstorrent.com/components/menu.md): A dropdown menu component that displays a list of actionable items when triggered. - [Modal](https://vesper.tenstorrent.com/components/modal.md): A dialog overlay component for displaying focused content that requires user attention or interaction. - [Progress Bar](https://vesper.tenstorrent.com/components/progress-bar.md): A horizontal progress indicator that visualizes completion as a percentage. - [Radio Group](https://vesper.tenstorrent.com/components/radio-group.md): A group of mutually exclusive radio inputs with labels. - [Range](https://vesper.tenstorrent.com/components/range.md): A multi-thumb range input for selecting a span of numeric values between a minimum and maximum. - [Select](https://vesper.tenstorrent.com/components/select.md): A form-ready dropdown select component supporting controlled and uncontrolled usage. - [Sheet](https://vesper.tenstorrent.com/components/sheet.md): A slide-in panel that appears from the left or right edge of the viewport. - [Show More](https://vesper.tenstorrent.com/components/show-more.md): A toggle button that switches between "Show more" and "Show less" labels with a caret icon. - [Skeleton](https://vesper.tenstorrent.com/components/skeleton.md): A placeholder loading component that mimics the shape of content while it loads. - [Slider](https://vesper.tenstorrent.com/components/slider.md): A single-thumb slider for selecting a numeric value within a range. - [Snippet](https://vesper.tenstorrent.com/components/snippet.md): A compact code display component with a built-in copy-to-clipboard button. - [Split Button](https://vesper.tenstorrent.com/components/split-button.md): A compound button that combines a primary action button with a dropdown menu toggle. - [Status Indicator](https://vesper.tenstorrent.com/components/status-indicator.md): A compact status label with a colored dot that communicates the current state of a process or resource. - [Switch](https://vesper.tenstorrent.com/components/switch.md): A toggle switch input with an optional label. - [Tabs](https://vesper.tenstorrent.com/components/tabs.md): A tabbed interface component for organizing content into switchable panels. - [Tag](https://vesper.tenstorrent.com/components/tag.md): A small label component for categorizing or annotating content. - [Text Area](https://vesper.tenstorrent.com/components/text-area.md): A multi-line text input component that supports different visual variants. - [Text Button](https://vesper.tenstorrent.com/components/text-button.md): A minimal, text-only button without background or border. - [Text Input](https://vesper.tenstorrent.com/components/text-input.md): A text input component supporting different visual variants, as well as leading and trailing icons. - [Theme Switcher](https://vesper.tenstorrent.com/components/theme-switcher.md): A three-way toggle for switching between system, light, and dark color themes. - [Toast](https://vesper.tenstorrent.com/components/toast.md): A notification system for displaying temporary messages at the bottom of the screen. - [Toggle](https://vesper.tenstorrent.com/components/toggle.md): A single-select toggle group that allows the user to choose one option from a set. - [Tooltip](https://vesper.tenstorrent.com/components/tooltip.md): A popup overlay that displays additional information when hovering over or focusing on a trigger element. - [Typography](https://vesper.tenstorrent.com/components/typography.md): A polymorphic text component that applies consistent typographic styles from the Vesper design system.