Settings 1
Settings
Settings
Team Name
This is your team's visible name within SERP. For example, the name of your company or department.
Please use 32 characters at maximum.
Team URL
This is your team's URL namespace on SERP. Within it, your team can inspect their projects, check out any recent activity, or configure settings to their liking.
Please use 48 characters at maximum.
Team Avatar
This is your team's avatar.
Click on the avatar to upload a custom one from your files.
An avatar is optional but strongly recommended.
Preview Deployment Suffix
By default, the URL of every new Preview Deployment ends with .SERP.app. This setting allows you to choose your own custom domain in place of this suffix.
This feature is available on the Pro plan for an additional $100 per month.
Team ID
This is your team's ID within SERP.
Used when interacting with the SERP API.
SERP Toolbar
Enable the SERP Toolbar on your Deployments.
Learn more about the SERP Toolbar
Transfer
Transfer your projects to another team without downtime or workflow interruptions.
Learn more about Transferring Projects
Leave Team
Revoke your access to this Team. Any resources you've added to the Team will remain.
To leave this Team, ensure at least one more Member has the Owner role.
Delete Team
Permanently remove your team and all of its contents from the SERP platform. This action is not reversible — please continue with caution.
Warning
Settings 2
User Profile & Security
User Profile & Security
Profile Information
Update your personal details here.
JPG, GIF or PNG. 1MB max.
Your email address cannot be changed here.
Password
Change your password regularly to keep your account secure.
Must be at least 8 characters long.
Two-Factor Authentication (2FA)
Add an extra layer of security to your account.
2FA is Enabled
Settings 3
Billing & Usage
Billing & Usage
Current Plan
Your active subscription details.
Includes:
- Unlimited Projects
- 1 TB Bandwidth
- 10 Team Members
- Priority Support
Payment Method
The card used for your subscription.
Current Usage
Your consumption for the current billing cycle.
Usage resets at the start of your next billing cycle.
Billing History
Review your past invoices and payments.
| Invoice ID | Date | Status | Amount | Actions |
|---|---|---|---|---|
| INV-1234 | 2024-03-01 | Paid | $20.00 | |
| INV-1150 | 2024-02-01 | Paid | $20.00 | |
| INV-1088 | 2024-01-01 | Paid | $20.00 |
Settings 4
Integrations
Integrations
Connected Integrations
Manage your active service connections.
GitHub
Connect repositories for seamless deployment.
Connected on 2023-05-15
Slack
Receive deployment notifications in your channels.
Connected on 2023-08-20
Available Integrations
Connect new services to enhance your workflow.
GitLab Source Control
Connect GitLab repositories and groups.
Datadog Monitoring
Send logs and monitoring data to Datadog.
MongoDB Atlas Database
Integrate with your MongoDB Atlas clusters.
Settings 5
Notifications
Notification Settings
Email Notifications
Receive notifications at alex.doe@example.com. Manage which emails you receive below.
Slack Notifications
Notifications sent to #deployments in ACME Corp.
Webhook Notifications
Send notifications to a custom HTTP endpoint.
Settings 6
API Keys
API Keys
Important Security Notice
Generate New Token
Create a new API token for your applications or scripts.
Give your token a descriptive name.
Existing Tokens
Manage your previously generated API tokens.
| Name | Token Preview | Created | Last Used | Actions |
|---|---|---|---|---|
| My Development Script | abc...xyz | 2024-01-15 | 2024-03-10 | |
| CI/CD Pipeline | def...uvw | 2023-11-01 | 2024-03-20 | |
| Analytics Integration | ghi...rst | 2024-02-28 | Never |
Settings 7
Domains
Domains
Domains
Manage Your Domains
Your Domains
List of domains associated with your team.
| Domain | Status | Configuration | Added | Actions |
|---|---|---|---|---|
| www.example.com | Verified | Verified (A Record) | 2024-01-20 | |
| blog.example.dev | Pending | 2024-03-15 | ||
| shop.example.org | Error Incorrect TXT record found | 2024-02-01 | ||
| docs.example.com | Verified | Verified (A Record) | 2023-12-10 |
DNS propagation can take up to 48 hours in some cases.
Settings 8
Team Members
Team Members
Team Members
Manage Your Team
Members (4)
Manage current team members and pending invitations.
| Member | Role | Joined / Invited | Actions |
|---|---|---|---|
Alex Doe alex.doe@example.com | Owner | 2023-01-15 | |
Jamie Smith jamie.smith@example.com | Member | 2023-05-20 | |
TK Taylor Kim taylor.kim@example.com | Member | 2024-02-10 | |
Pending Invite new.dev@example.org | Invited | Invited Now |
Settings 9
Environment Variables
Environment Variables
Security Warning
Existing Variables
Environment variables defined for this team.
| Key | Value | Environments | Last Updated | Actions |
|---|---|---|---|---|
| DATABASE_URL | Encrypted Value | Production Preview Development | 2024-03-10 | |
| API_ENDPOINT | https://api.example.com/v1 | Production Preview Development | 2024-01-20 | |
| STRIPE_SECRET_KEY | Encrypted Value | Production Preview Development | 2023-11-05 | |
| NEXT_PUBLIC_ANALYTICS_ID | UA-12345678-9 | Production Preview Development | 2024-02-15 |
Settings 10
Log Drains
Log Drains
Forward Your Logs
Configured Log Drains
Manage your active log forwarding endpoints.
| Type | Endpoint / URL | Status | Actions |
|---|---|---|---|
HTTPS | https://logs.example.com/ingest/SERP | Active | |
Datadog | datadoghq.com (API Key: ••••••••) | Active | |
Syslog | syslog.example.org:514 | Error Connection timed out | |
HTTPS | https://new-log-service.io/hook | Pending |
What is a 'Settings' Component?
A 'Settings' component is a section of a website or application where users can manage their preferences, profile information, and other configurations. It's a way to give users control over their experience. A good settings page can improve user satisfaction and reduce support requests.
Why Are 'Settings' Components Useful?
Users expect to be able to customize their experience. A 'Settings' section provides a centralized location for users to manage their account and preferences. Using our components, you can create a user-friendly and comprehensive settings page.
Speed Up Your Development with Shadcn Blocks
Making a 'Settings' page from scratch takes time. That's where shadcn/ui and our Shadcn Blocks help. Shadcn gives you a set of components to use in your projects. We've used them to create complete 'Settings' blocks.
You don't need to be a designer. Browse the 'Settings' page variations, find one you like, and copy-paste it. You'll have a professional 'Settings' section in minutes. Every component is responsive, accessible, and easy to customize. Build your 'Settings' page and empower your users.