Accessible, themeable, customizable composable UI kit featuring polished Inputs, Buttons, Dialogs, Calendar, Sidebar, Tabs, Selects and more, streamlining consistent, modern interface building.
Shadcn-Compose is a UI kit for Android Jetpack Compose, inspired by the principles and components of shadcn/ui. This library provides a set of beautifully designed and customizable Compose components to help you build modern and consistent user interfaces with ease.
This project aims to bring the elegance and developer experience of shadcn/ui to the world of Android Jetpack Compose. We follow similar design philosophies, focusing on:
For more information on the original shadcn/ui, please visit the official shadcn/ui documentation.
java.time APIs (e.g., DayOfWeek.getDisplayName) in the Calendar component, which are available from API level 26.Add the library to your module's build.gradle file. You can find the latest version in the release tags.
Groovy
dependencies {
implementation 'io.github.derangga:shadcn-ui-kmp:0.2.0'
}Kotlin DSL
dependencies {
implementation("io.github.derangga:shadcn-ui-kmp:0.2.0")
}Replace your existing theme with ShadcnTheme in your MainActivity:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ShadcnTheme {
// your screen navigation or components
}
}
}
}Import and use any available component:
import com.shadcn.ui.components.Button
import com.shadcn.ui.components.Input
@Composable
fun MyScreen() {
var text by remember { mutableStateOf("") }
Input(
value = text,
onValueChange = { text = it },
placeholder = "Enter your name"
)
Button(onClick = { /* handle click */ }) {
Text("Submit")
}
}Update your application theme to use Shadcn-Compose's theme:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ShadcnTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Column(
modifier = Modifier
.fillMaxWidth()
.padding(innerPadding)
) {
var nameTxt by remember { mutableStateOf("John Doe") }
var userNameTxt by remember { mutableStateOf("johndoe") }
Text(
text = "Account",
fontSize = 18.sp,
fontWeight = FontWeight.SemiBold,
color = MaterialTheme.shadcnColors.foreground
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "Make changes to your account here. Click save when you're done.",
fontSize = 14.sp,
color = MaterialTheme.shadcnColors.mutedForeground
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Name",
fontWeight = FontWeight.SemiBold,
color = MaterialTheme.shadcnColors.foreground
)
Input(
value = nameTxt,
onValueChange = { nameTxt = it },
placeholder = "Enter your name",
singleLine = true
)
Spacer(modifier = Modifier.height(12.dp))
Text(
text = "Username",
fontWeight = FontWeight.SemiBold,
color = MaterialTheme.shadcnColors.foreground
)
Input(
value = userNameTxt,
onValueChange = { userNameTxt = it },
placeholder = "Enter your username",
singleLine = true
)
Spacer(modifier = Modifier.height(12.dp))
Button(onClick = {}) {
Text("Save changes")
}
}
}
}
}
}
}Here's a list of currently available components:
Shadcn-Compose is a UI kit for Android Jetpack Compose, inspired by the principles and components of shadcn/ui. This library provides a set of beautifully designed and customizable Compose components to help you build modern and consistent user interfaces with ease.
This project aims to bring the elegance and developer experience of shadcn/ui to the world of Android Jetpack Compose. We follow similar design philosophies, focusing on:
For more information on the original shadcn/ui, please visit the official shadcn/ui documentation.
java.time APIs (e.g., DayOfWeek.getDisplayName) in the Calendar component, which are available from API level 26.Add the library to your module's build.gradle file. You can find the latest version in the release tags.
Groovy
dependencies {
implementation 'io.github.derangga:shadcn-ui-kmp:0.2.0'
}Kotlin DSL
dependencies {
implementation("io.github.derangga:shadcn-ui-kmp:0.2.0")
}Replace your existing theme with ShadcnTheme in your MainActivity:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ShadcnTheme {
// your screen navigation or components
}
}
}
}Import and use any available component:
import com.shadcn.ui.components.Button
import com.shadcn.ui.components.Input
@Composable
fun MyScreen() {
var text by remember { mutableStateOf("") }
Input(
value = text,
onValueChange = { text = it },
placeholder = "Enter your name"
)
Button(onClick = { /* handle click */ }) {
Text("Submit")
}
}Update your application theme to use Shadcn-Compose's theme:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ShadcnTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Column(
modifier = Modifier
.fillMaxWidth()
.padding(innerPadding)
) {
var nameTxt by remember { mutableStateOf("John Doe") }
var userNameTxt by remember { mutableStateOf("johndoe") }
Text(
text = "Account",
fontSize = 18.sp,
fontWeight = FontWeight.SemiBold,
color = MaterialTheme.shadcnColors.foreground
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "Make changes to your account here. Click save when you're done.",
fontSize = 14.sp,
color = MaterialTheme.shadcnColors.mutedForeground
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Name",
fontWeight = FontWeight.SemiBold,
color = MaterialTheme.shadcnColors.foreground
)
Input(
value = nameTxt,
onValueChange = { nameTxt = it },
placeholder = "Enter your name",
singleLine = true
)
Spacer(modifier = Modifier.height(12.dp))
Text(
text = "Username",
fontWeight = FontWeight.SemiBold,
color = MaterialTheme.shadcnColors.foreground
)
Input(
value = userNameTxt,
onValueChange = { userNameTxt = it },
placeholder = "Enter your username",
singleLine = true
)
Spacer(modifier = Modifier.height(12.dp))
Button(onClick = {}) {
Text("Save changes")
}
}
}
}
}
}
}Here's a list of currently available components: