Raster UI components examples

Raster

A segmented control for selecting the application's appearance theme, with options for System, Light, and Dark.

• Theme settings

Raster

An open dropdown menu used to switch between organizations or workspaces, featuring the current workspace, a link to settings, and an option to add a new organization.

• Dropdown menu

Raster

A text input field for a URL slug, preceded by a static base URL prefix.

• Input text

Raster

A read-only input field displaying an API key, accompanied by a label and three icon buttons for copying, regenerating, and deleting the key.

• Click to copy

Raster

A card displaying a 3x3 grid of photo thumbnails, with a title, photo count, and settings button below.

• Card

Raster

A context menu overlay showing bulk actions for multiple selected images, including copying URLs, adding tags, transferring, and moving to trash.

• Dropdown menu

Raster

A simple toast notification confirming that a description was generated successfully.

• Notification Toast

Raster

An input field for adding tags to an image asset, featuring a tag icon and an enter key symbol.

• Input tag

Raster

A card displaying an image thumbnail with its filename, dimensions, and upload timestamp.

• Card

Raster

A card component displaying a file in the process of uploading. It features a large placeholder area for the image thumbnail, the filename, and a loading spinner with 'Uploading' text.

• Card

Raster

An empty state message indicating no images are present, with instructions to drag and drop images to begin organizing them.

• Illustration

Raster

A vertical sidebar navigation menu featuring a workspace switcher, primary navigation links, and a collapsible library section with nested items.

• Vertical navigation