Skip to content

[UI] Update text regarding billing based on the project type #3876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
peterschmidt85 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[UI] Update text regarding billing based on the project type #3876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3d02a8
Update project type copy
May 13, 2026
fd384c8
Adjust project type capitalization
May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 48 additions & 15 deletions frontend/src/App/Login/LoginByGithub/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,27 @@ function ProductOverview() {
</dt>
<dt>dstack Sky</dt>

<dd>Your cloud accounts</dd>
<dd>
Bring your own cloud{' '}
<Popover
header="Bring your own cloud (BYOC)"
content={
<>
<Box variant="p">
Use compute from your own cloud account(s) by providing your credentials.
</Box>
<Box variant="p">
You pay for compute and storage usage directly to the configured cloud
provider(s) through their billing. <code>dstack</code> won't bill or charge you.
</Box>
</>
}
>
<Link variant="info">
<Icon name="status-info" size="small" />
</Link>
</Popover>
</dd>
<dd>
<Icon name="check" />
</dd>
Expand All @@ -237,36 +257,47 @@ function ProductOverview() {
</dd>

<dd>
SSH fleets{' '}
GPU marketplace{' '}
<Popover
header="SSH fleets"
content="If you have a group of on-prem servers accessible via SSH, you can create an SSH fleet."
header="GPU marketplace"
content={
<>
<Box variant="p">
Use compute from multiple cloud providers without needing your own cloud
account(s).
</Box>
<Box variant="p">
You pay for compute and storage usage directly to <code>dstack</code>. You can
top up your balance in your <code>dstack</code> user settings.
</Box>
<Box variant="p">When you sign up, you get $5 in credits.</Box>
</>
}
>
<Link variant="info">
<Icon name="status-info" size="small" />
</Link>
</Popover>
</dd>
<dd>
<Icon name="check" />
</dd>
<dd></dd>
<dd>
<Icon name="check" />
</dd>

<dd>
GPU marketplace{' '}
SSH fleets{' '}
<Popover
header="GPU marketplace"
content="dstack Sky offers the cheapest cloud GPU offers from a variety of supported providers.
You pay directly to dstack Sky for GPU usage."
header="SSH fleets"
content="If you have a group of on-prem servers accessible via SSH, you can create an SSH fleet."
>
<Link variant="info">
<Icon name="status-info" size="small" />
</Link>
</Popover>
</dd>
<dd></dd>
<dd>
<Icon name="check" />
</dd>
<dd>
<Icon name="check" />
</dd>
Expand All @@ -283,11 +314,13 @@ function ProductOverview() {
</Popover>
</dd>
<dd>Configure your own domain</dd>
<dd>Pre-configured *.sky.dstack.ai</dd>
<dd>
Pre-configured <code>*.sky.dstack.ai</code>
</dd>

<dd>Pricing</dd>
<dd>Free</dd>
<dd>Pay only for marketplace GPU</dd>
<dd>Pay only if you use GPU marketplace</dd>

<dd></dd>
<dd>Self-hosted</dd>
Expand All @@ -302,7 +335,7 @@ function ProductOverview() {
</Header>
<TextContent>
<ul>
<li>Use your own cloud accounts or access the cheapest GPUs from our marketplace.</li>
<li>Use compute from your own cloud account(s) or through GPU marketplace.</li>
<li>Create dev environments, run training tasks, and deploy inference services.</li>
<li>Manage volumes and fleets.</li>
<li>Manage multiple projects and teams.</li>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/App/Login/LoginByGithub/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ body {
padding: 0;

dt {
color: cs.$color-text-body-secondary;
color: cs.$color-text-body-default;
font-weight: bold;
}

Expand Down
17 changes: 10 additions & 7 deletions frontend/src/pages/Project/CreateWizard/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
export const projectTypeOptions = [
{
label: 'GPU marketplace',
description:
'Find the cheapest GPUs available in our marketplace. Enjoy $5 in free credits, and easily top up your balance with a credit card.',
value: 'gpu_marketplace',
label: 'Bring your own cloud',
description: 'Use compute from your own cloud account(s) by providing your credentials.',
billing_notes:
"You pay for compute and storage usage directly to the configured cloud provider(s) through their billing. dstack won't bill or charge you.",
value: 'own_cloud',
},
{
label: 'Your cloud accounts',
description: 'Connect and manage your cloud accounts. dstack supports all major GPU cloud providers.',
value: 'own_cloud',
label: 'GPU marketplace',
description: 'Use compute from multiple cloud providers without needing your own cloud account(s).',
billing_notes:
'You pay for compute and storage usage directly to dstack. You can top up your balance in your dstack user settings.',
value: 'gpu_marketplace',
},
];
39 changes: 24 additions & 15 deletions frontend/src/pages/Project/CreateWizard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { WizardProps } from '@cloudscape-design/components';
import { TilesProps } from '@cloudscape-design/components/tiles';

import {
Alert,
Cards,
Container,
FormCards,
Expand Down Expand Up @@ -127,7 +128,7 @@ export const CreateProjectWizard: React.FC = () => {
const formMethods = useForm<IProjectWizardForm>({
resolver,
defaultValues: {
project_type: 'gpu_marketplace',
project_type: 'own_cloud',
fleet: {
...fleetFormDefaultValues,
enable_default: true,
Expand All @@ -137,6 +138,7 @@ export const CreateProjectWizard: React.FC = () => {

const { handleSubmit, control, watch, trigger, formState, getValues, setValue, setError } = formMethods;
const formValues = watch();
const selectedProjectTypeOption = projectTypeOptions.find(({ value }) => value === formValues['project_type']);

const onCancelHandler = () => {
navigate(ROUTES.PROJECT.LIST);
Expand Down Expand Up @@ -365,18 +367,26 @@ export const CreateProjectWizard: React.FC = () => {
/>

<div>
<FormField
label={t('projects.edit.project_type')}
description={t('projects.edit.project_type_description')}
errorText={formState.errors.project_type?.message}
>
<FormTiles
control={control}
name="project_type"
items={projectTypeOptions}
onChange={onChangeProjectTypeHandler}
/>
</FormField>
<SpaceBetween direction="vertical" size="s">
<FormField
label={t('projects.edit.project_type')}
description={t('projects.edit.project_type_description')}
errorText={formState.errors.project_type?.message}
>
<FormTiles
control={control}
name="project_type"
items={projectTypeOptions}
onChange={onChangeProjectTypeHandler}
/>
</FormField>

{selectedProjectTypeOption?.billing_notes && (
<FormField label={t('billing.title')}>
<Alert type="success">{selectedProjectTypeOption.billing_notes}</Alert>
</FormField>
)}
</SpaceBetween>
</div>
</SpaceBetween>
</Container>
Expand Down Expand Up @@ -463,8 +473,7 @@ export const CreateProjectWizard: React.FC = () => {
},
{
label: t('projects.edit.project_type'),
value: projectTypeOptions.find(({ value }) => value === formValues['project_type'])
?.label,
value: selectedProjectTypeOption?.label,
},
{
label: t('projects.edit.backends'),
Expand Down
4 changes: 2 additions & 2 deletions mkdocs/overrides/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -987,7 +987,7 @@ <h2>dstack Sky</h2>

<div class="tx-landing__bottom_cta_card_panel">
<div class="tx-landing__bottom_cta_card_text">
<p>Hosted by us. Bring your own cloud, or tap into marketplace.</p>
<p>Hosted by us. Bring your own clouds, or tap into GPU marketplace.</p>
</div>
<div class="tx-landing__bottom_cta_card_button_panel">
<div>
Expand All @@ -998,7 +998,7 @@ <h2>dstack Sky</h2>
</div>

<div class="tx-landing__bottom_cta_card_button_subheader">
Get $5 in GPU credits. Already have an account? <a href="https://sky.dstack.ai" target="_blank"
Get $5 in GPU marketplace credits. Have an account? <a href="https://sky.dstack.ai" target="_blank"
class="tx-footer__section-link external">Sign in</a>
</div>
</div>
Expand Down
Loading