Account Management Blocks based on shadcn/ui
The example below showcases an account settings section where a user can update their basic information. Each input field has a placeholder or dropdown menu that clearly indicates the information that needs to be entered, built with shadcn/ui for clarity and style.
Personal Information
Manage your personal details and profile information. This information will be visible to other users on the platform.
import AccountBasicInfo01 from "@/components/creative-tim/blocks/account-basic-info-01"
export default function Page() {
return <AccountBasicInfo01 />
}
Use this section to let the users enhance the safety of their account access through additional verification steps, with a clean and accessible layout built using shadcn/ui.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROTwo-Factor Authentication
Add an extra layer of security to your account
Security Keys
RecommendedPhysical security keys provide the highest level of protection by requiring a hardware device for authentication.
No security keys configured
Authenticator App
RecommendedGenerate time-based one-time passwords (TOTP) using apps like Google Authenticator or Authy.
Not configured
SMS Number
Receive verification codes via text message to your registered mobile number.
+1 (555) 123-4567
Recovery Codes
Generate backup codes that can be used if you lose access to your 2FA methods. Store them securely in a safe place.
import Account2fa01 from "@/components/creative-tim/blocks/account-2fa-01"
export default function Page() {
return <Account2fa01 />
}
This Tailwind CSS block example comes with clear instructions and required steps to ensure the user creates a secure password. The visibility toggles next to the password fields are a helpful feature that allows users to verify their input without compromising security, styled with shadcn/ui.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROChange Password
Update your password to keep your account secure
Password Requirements
Your password must meet the following criteria for enhanced security:
- At least 8 characters long
- One uppercase letter (A-Z)
- One lowercase letter (a-z)
- One number (0-9)
- One special character (!@#$%^&*)
Security Best Practices
- •Change your password regularly (every 90 days)
- •Never share your password with anyone
- •Use a unique password for each account
- •Consider using a password manager
import AccountChangePassword01 from "@/components/creative-tim/blocks/account-change-password-01"
export default function Page() {
return <AccountChangePassword01 />
}
In this account block example, the toggle switches make it convenient to enable or disable notification methods with a simple click or tap, designed with shadcn/ui for seamless usability.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PRONotification Preferences
Customize how you receive notifications. These settings apply to all activities you're monitoring across the platform.
Activity | Email | Push | SMS |
|---|---|---|---|
Mentions SocialNotify when another user mentions you in a comment | |||
Comments SocialNotify when another user comments on your item | |||
New Follower SocialNotify when someone starts following you | |||
Login Activity SecurityAlert when logging in from a new device or location | |||
Password Changed SecurityImmediate notification when password is updated | |||
Product Updates ProductGet notified about new features and improvements |
About Notification Delivery
Email notifications are sent instantly. Push notifications require the mobile app. SMS notifications may incur carrier charges. You can change these settings at any time.
import AccountNotifications01 from "@/components/creative-tim/blocks/account-notifications-01"
export default function Page() {
return <AccountNotifications01 />
}
This UI block allows the user to monitor and control where their account is accessed from, which is an important aspect of maintaining account security. The call-to-action buttons help users take necessary actions to protect their account, styled with shadcn/ui elements.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROActive Sessions
Manage and monitor devices that have access to your account
Laptop Session
Current SessionSmartphone Session
Desktop Session
Security Tip
If you notice any suspicious activity, immediately remove the session and change your account password. Enable two-factor authentication for additional security.
import AccountSessions01 from "@/components/creative-tim/blocks/account-sessions-01"
export default function Page() {
return <AccountSessions01 />
}
Use this block to let the user customize their profile and set their availability or presence status for other users to see. The design is user-friendly, with clear labels and visual cues for interaction, using shadcn/ui components.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROProfile Picture
Update your profile picture and personal information
Select and Upload Image
.svg, .png, .jpg (size 400x400px)
Profile Picture Tips
Choose a high-quality, professional image that clearly shows your face. Recommended image size is 400x400 pixels. Only .svg, .png, and .jpg formats are supported.
import AccountAvatarUpload01 from "@/components/creative-tim/blocks/account-avatar-upload-01"
export default function Page() {
return <AccountAvatarUpload01 />
}
This block allows users to connect their accounts from different platforms for a more integrated experience using toggle switchers, implemented with shadcn/ui for consistent UI design.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROThird-Party Integrations
Manage and configure connections to external services and platforms
GitHub
DevelopmentConnect your GitHub account to sync repositories and track contributions.
Spotify
MusicLink your Spotify account to share playlists and sync listening activity.
Discord
CommunicationIntegrate your Discord account to manage server connections and notifications.
Integration Security
Ensure you trust the applications you connect. Review and manage third-party access to your account regularly. You can revoke access at any time by disabling the integration.
import AccountIntegrations01 from "@/components/creative-tim/blocks/account-integrations-01"
export default function Page() {
return <AccountIntegrations01 />
}
API key manager layout with search, scope badges, rotation actions, and security policy guidance. Includes a creation panel for setting key names, scopes, and access restrictions.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROAPI Keys Manager
Secure and rotate access keys for every environment
| Key | Scopes | Activity | Status | Actions |
|---|---|---|---|---|
Core API Livesk_live_4f2b...a91 | ReadWriteBilling | Created: Jan 10, 2026 Last used: 2 hours ago | Active | |
Analytics Livesk_live_3c7d...b18 | ReadEvents | Created: Dec 2, 2025 Last used: Yesterday | Active | |
Staging Testsk_test_9d12...c55 | ReadWrite | Created: Nov 18, 2025 Last used: 5 days ago | Rotated | |
Legacy Mobile Livesk_live_1a22...e09 | Read | Created: Aug 12, 2025 Last used: Never | Revoked |
Create a new key
Set the key name and apply access restrictions.
Read-only key
Prevent write and billing access.
IP allowlist
Require requests from approved IPs.
Security guidance
Keep production keys safe with automatic rotation and alerts.
Rotation reminders
Notify owners after 60 days of usage.
Key activity alerts
Get notified on unusual request spikes.
Secret storage
Store keys in your vault and vault rotations.
import ApiKeysManager from "@/components/creative-tim/blocks/api-keys-manager"
export default function Page() {
return <ApiKeysManager />
}
Guided integration setup with a stepper, provider selection, scope configuration, and success confirmation. Ideal for onboarding external services.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROIntegration Setup Wizard
Connect your tools in three guided steps.
Connect
Link your provider
Configure
Set permissions
Complete
Finish setup
Connect provider
Choose a provider and generate your access token.
Sandbox mode
Test the integration before going live.
Setup details
Configure defaults once and reuse across projects.
Environment
Sandbox workspace
Ownership
Managed by Emma Rodriguez
Alerts
Send failure alerts to #devops
import IntegrationSetupWizard from "@/components/creative-tim/blocks/integration-setup-wizard"
export default function Page() {
return <IntegrationSetupWizard />
}