Sandbox

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
3. ButtonDisplays a button or a component that looks like a button.
4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
5. SegmentedA set of mutually exclusive options inside a single inline container.
6. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
7. 17 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import Sandbox from "@/components/blocks/sandbox/sandbox";

export default function Page() {
  return <Sandbox />;
}

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BadgeDisplays a badge or a component that looks like a badge.
3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
4. ButtonDisplays a button or a component that looks like a button.
5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
6. SegmentedA set of mutually exclusive options inside a single inline container.
7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
8. 22 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import SandboxInstance from "@/components/blocks/sandbox-instance/sandbox-instance";

export default function Page() {
  return <SandboxInstance />;
}

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BadgeDisplays a badge or a component that looks like a badge.
3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
4. ButtonDisplays a button or a component that looks like a button.
5. CheckboxA control that allows the user to toggle between checked and not checked.
6. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
7. SegmentedA set of mutually exclusive options inside a single inline container.
8. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
9. 23 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import SandboxInstanceBulk from "@/components/blocks/sandbox-instance-bulk/sandbox-instance-bulk";

export default function Page() {
  return <SandboxInstanceBulk />;
}

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BadgeDisplays a badge or a component that looks like a badge.
3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
4. ButtonDisplays a button or a component that looks like a button.
5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
6. SegmentedA set of mutually exclusive options inside a single inline container.
7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
8. 23 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import SandboxInstanceConcept from "@/components/blocks/sandbox-instance-concept/sandbox-instance-concept";

export default function Page() {
  return <SandboxInstanceConcept />;
}

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BadgeDisplays a badge or a component that looks like a badge.
3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
4. ButtonDisplays a button or a component that looks like a button.
5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
6. SegmentedA set of mutually exclusive options inside a single inline container.
7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
8. 22 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import SandboxInstanceConceptFull from "@/components/blocks/sandbox-instance-concept-full/sandbox-instance-concept-full";

export default function Page() {
  return <SandboxInstanceConceptFull />;
}

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BadgeDisplays a badge or a component that looks like a badge.
3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
4. ButtonDisplays a button or a component that looks like a button.
5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
6. SegmentedA set of mutually exclusive options inside a single inline container.
7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
8. 25 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import SandboxInstanceDetail from "@/components/blocks/sandbox-instance-detail/sandbox-instance-detail";

export default function Page() {
  return <SandboxInstanceDetail />;
}

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BadgeDisplays a badge or a component that looks like a badge.
3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
4. ButtonDisplays a button or a component that looks like a button.
5. CheckboxA control that allows the user to toggle between checked and not checked.
6. DialogA modal overlay for confirmations, decisions, and short flows.
7. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
8. Radio GroupA set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
9. SegmentedA set of mutually exclusive options inside a single inline container.
10. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
11. 20 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import SandboxRecipe from "@/components/blocks/sandbox-recipe/sandbox-recipe";

export default function Page() {
  return <SandboxRecipe />;
}

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BadgeDisplays a badge or a component that looks like a badge.
3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
4. ButtonDisplays a button or a component that looks like a button.
5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
6. SegmentedA set of mutually exclusive options inside a single inline container.
7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
8. 24 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import SandboxTemplate from "@/components/blocks/sandbox-template/sandbox-template";

export default function Page() {
  return <SandboxTemplate />;
}

Built from

1. AvatarAn image element with a fallback for representing the user.
2. BadgeDisplays a badge or a component that looks like a badge.
3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
4. ButtonDisplays a button or a component that looks like a button.
5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
6. SegmentedA set of mutually exclusive options inside a single inline container.
7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
8. SwitchA control that toggles between checked and unchecked states.
9. 22 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import SandboxWorkspace from "@/components/blocks/sandbox-workspace/sandbox-workspace";

export default function Page() {
  return <SandboxWorkspace />;
}