Curated
Free
Recently Added
Components
Async Button
Background
Background: Background Effects
Background: Background Gradients
Background: Background Patterns
Background: Background Shaders
Code Block
Effect
Effect: Background Effects
Effect: Border Effects
Effect: Hover Effects
Effect: Media Effects
Effect: Text Effects
File Tree
Image Slider
Lightbox
Media Annotation
Progress
Shaders
Shaders: 3D Scenes
Shaders: Backgrounds
Terminal Playback
Theme Switcher
Blocks
404
Authentication
Bento
Blog
Blog Post
Case Study
Comparison
Contact
Cta
Faq
Feature
Footer
Form
Hero
Integration
Legal Page
Logo Cloud
Navigation
Press Awards
Pricing
Product Tour
Profile
Service Page
Services
Steps
Team
Testimonial
Theme
My Themes
Local Save
Built-in Themes
Default
Amber Minimal
Aurora
Blue Shift
Cyberpunk
Darkmatter
Espresso
Event Horizon
Monochrome
Nature
Nightshade
Overclock
Soft Lavender
Twitter
Code Block 2 - Language Tabs
Pro
A dark tabbed code showcase for comparing the same example across multiple programming languages.
App.tsx
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
// react comment
const test = "test";
console.log(test);
render() {
return <h1>Hello, World!</h1>;
}
}app.py
from dataclasses import dataclass
@dataclass
class User:
name: str
plan: str
def greet(user: User) -> str:
return f"Hello, {user.name}!"
print(greet(User("Avery", "Pro")))index.js
const users = [
{ name: "Avery", plan: "Pro" },
{ name: "Mina", plan: "Free" },
];
const proUsers = users.filter((user) => user.plan === "Pro");
console.log(proUsers);index.php
<?php
$users = [
["name" => "Avery", "plan" => "Pro"],
["name" => "Mina", "plan" => "Free"],
];
$proUsers = array_filter($users, fn ($user) => $user["plan"] === "Pro");
print_r($proUsers); Loading code...
Starwind Dependencies
Sign in to view code and copy install commands.
Sign inThis component requires Starwind Pro.
Get lifetime access to all premium components, updates, and priority support.
Upgrade to ProFailed to load code. Please try again.