Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
@@ -23,8 +22,8 @@
-
-
+
+
@@ -76,17 +75,17 @@ npm install @devup-ui/webpack-plugin
Next.js Build Time and Build Size (github action - ubuntu-latest)
-| Library | Version | Build Time | Build Size |
-|--------------------------|----------|------------|-------------------|
-| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
-| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
-| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
-| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
-| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
-| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
-| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
-| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
-| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
+| Library | Version | Build Time | Build Size |
+| ---------------------- | ------- | ---------- | ----------------- |
+| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
+| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
+| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
+| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
+| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
+| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
+| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
+| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
+| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
## How it works
@@ -94,30 +93,40 @@ Devup UI is a CSS in JS preprocessor that does not require runtime.
Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
We develop a preprocessor that considers all grammatical cases.
-```typescript
-const before =
+```tsx
+const before =
-const after =
+const after =
```
Variables are fully supported.
-```typescript
-const before =
-
-const after =
+```tsx
+const before =
+
+const after = (
+
+)
```
Various expressions and responsiveness are also fully supported.
-```typescript
-const before = b ? "yellow" : variable]}/>
-
-const after =
b ? "d2" : "d3"}`} style={{
- "--d2": variable
-}}/>
+```tsx
+const before = b ? 'yellow' : variable]} />
+
+const after = (
+
b ? 'd2' : 'd3'}`}
+ style={{
+ '--d2': variable,
+ }}
+ />
+)
```
Support Theme with Typing
@@ -139,36 +148,40 @@ Support Theme with Typing
}
```
-```typescript
+```tsx
// Type Safe
-
+
```
Support Responsive And Pseudo Selector
You can use responsive and pseudo selector.
-```typescript
+```tsx
// Responsive with Selector
-const box =
+const box =
// Same
-const box =
+const box =
```
## How to Contribute
### Requirements
+
- [Node.js](https://nodejs.org) (LTS version recommended)
- [Rust](https://rustup.rs) compiler
- pnpm package manager (`npm install -g pnpm`)
### Development Setup
+
To set up the development environment, install the following packages:
+
```sh
pnpm i
pnpm build
cargo install cargo-tarpaulin
cargo install wasm-pack
```
-After installation, run `pnpm test` to ensure everything works correctly.
\ No newline at end of file
+
+After installation, run `pnpm test` to ensure everything works correctly.
diff --git a/README_ko.md b/README_ko.md
index 82ad08a1..699664a5 100644
--- a/README_ko.md
+++ b/README_ko.md
@@ -2,7 +2,6 @@
-
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
| Property | Description | Type | Default |
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/index.mdx b/apps/landing/src/app/(detail)/components/[component]/checkbox/index.mdx
index 58d4b2b1..15027c92 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/index.mdx
@@ -1 +1 @@
-`Checkbox` component allows users to select multiple options.
\ No newline at end of file
+`Checkbox` component allows users to select multiple options.
diff --git a/apps/landing/src/app/(detail)/components/[component]/color-picker/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/color-picker/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/color-picker/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/color-picker/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/color-picker/index.mdx b/apps/landing/src/app/(detail)/components/[component]/color-picker/index.mdx
index 8f149a61..5ded854f 100644
--- a/apps/landing/src/app/(detail)/components/[component]/color-picker/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/color-picker/index.mdx
@@ -1 +1 @@
-`Color Picker` component allows users to select colors from a color palette.
\ No newline at end of file
+`Color Picker` component allows users to select colors from a color palette.
diff --git a/apps/landing/src/app/(detail)/components/[component]/confirm/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/confirm/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/confirm/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/confirm/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/confirm/index.mdx b/apps/landing/src/app/(detail)/components/[component]/confirm/index.mdx
index 124f7fae..758b7297 100644
--- a/apps/landing/src/app/(detail)/components/[component]/confirm/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/confirm/index.mdx
@@ -1 +1 @@
-`Confirm` component displays a confirmation dialog to users.
\ No newline at end of file
+`Confirm` component displays a confirmation dialog to users.
diff --git a/apps/landing/src/app/(detail)/components/[component]/date-picker/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/date-picker/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/date-picker/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/date-picker/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/date-picker/index.mdx b/apps/landing/src/app/(detail)/components/[component]/date-picker/index.mdx
index 08c07d5d..67f10706 100644
--- a/apps/landing/src/app/(detail)/components/[component]/date-picker/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/date-picker/index.mdx
@@ -1 +1 @@
-`Date Picker` component allows users to select a date from a calendar interface.
\ No newline at end of file
+`Date Picker` component allows users to select a date from a calendar interface.
diff --git a/apps/landing/src/app/(detail)/components/[component]/dropdown/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/dropdown/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/dropdown/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/dropdown/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/dropdown/index.mdx b/apps/landing/src/app/(detail)/components/[component]/dropdown/index.mdx
index 7ccdce4b..2268669f 100644
--- a/apps/landing/src/app/(detail)/components/[component]/dropdown/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/dropdown/index.mdx
@@ -1 +1 @@
-`Dropdown` component displays a list of options that can be toggled.
\ No newline at end of file
+`Dropdown` component displays a list of options that can be toggled.
diff --git a/apps/landing/src/app/(detail)/components/[component]/footer/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/footer/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/footer/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/footer/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/footer/index.mdx b/apps/landing/src/app/(detail)/components/[component]/footer/index.mdx
index 546e56d2..20fbdfb6 100644
--- a/apps/landing/src/app/(detail)/components/[component]/footer/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/footer/index.mdx
@@ -1 +1 @@
-`Footer` component displays the bottom section of a page.
\ No newline at end of file
+`Footer` component displays the bottom section of a page.
diff --git a/apps/landing/src/app/(detail)/components/[component]/header/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/header/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/header/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/header/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/header/index.mdx b/apps/landing/src/app/(detail)/components/[component]/header/index.mdx
index ef274326..6800cb23 100644
--- a/apps/landing/src/app/(detail)/components/[component]/header/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/header/index.mdx
@@ -1 +1 @@
-`Header` component displays the top navigation area of a page.
\ No newline at end of file
+`Header` component displays the top navigation area of a page.
diff --git a/apps/landing/src/app/(detail)/components/[component]/input/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/input/Api.mdx
index 38f68784..a5f94f64 100644
--- a/apps/landing/src/app/(detail)/components/[component]/input/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/input/Api.mdx
@@ -1,13 +1,14 @@
###### API
-`Input` props extends the input HTML attributes.
-
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **variant** | The variant of the input | `'primary' \| 'default'` | `'default'` |
-| **size** | The size of the input | `'sm' \| 'md' \| 'lg'` | `'md'` |
-| **placeholder** | Placeholder text for the input | `string` | `undefined` |
-| **type** | The type of input | `'text' \| 'password' \| 'email' \| 'number'` | `'text'` |
-| **disabled** | Whether the input is disabled | `boolean` | `false` |
-| **error** | Whether the input has an error state | `boolean` | `false` |
-
\ No newline at end of file
+`Input` props extends the input HTML attributes.
+
+
+ | Property | Description | Type | Default | | --- | --- | --- | --- | |
+ **variant** | The variant of the input | `'primary' \| 'default'` |
+ `'default'` | | **size** | The size of the input | `'sm' \| 'md' \| 'lg'` |
+ `'md'` | | **placeholder** | Placeholder text for the input | `string` |
+ `undefined` | | **type** | The type of input | `'text' \| 'password' \|
+ 'email' \| 'number'` | `'text'` | | **disabled** | Whether the input is
+ disabled | `boolean` | `false` | | **error** | Whether the input has an error
+ state | `boolean` | `false` |
+
diff --git a/apps/landing/src/app/(detail)/components/[component]/input/index.mdx b/apps/landing/src/app/(detail)/components/[component]/input/index.mdx
index b2598a47..8b2541da 100644
--- a/apps/landing/src/app/(detail)/components/[component]/input/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/input/index.mdx
@@ -1 +1 @@
-`Input` component is used to handle text input from users.
\ No newline at end of file
+`Input` component is used to handle text input from users.
diff --git a/apps/landing/src/app/(detail)/components/[component]/label/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/label/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/label/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/label/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/label/index.mdx b/apps/landing/src/app/(detail)/components/[component]/label/index.mdx
index 66ac34e6..158e8a94 100644
--- a/apps/landing/src/app/(detail)/components/[component]/label/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/label/index.mdx
@@ -1 +1 @@
-`Label` component provides text labels for form elements.
\ No newline at end of file
+`Label` component provides text labels for form elements.
diff --git a/apps/landing/src/app/(detail)/components/[component]/menu/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/menu/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/menu/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/menu/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/menu/index.mdx b/apps/landing/src/app/(detail)/components/[component]/menu/index.mdx
index 97dbf522..72726159 100644
--- a/apps/landing/src/app/(detail)/components/[component]/menu/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/menu/index.mdx
@@ -1 +1 @@
-`Menu` component displays a list of navigation options.
\ No newline at end of file
+`Menu` component displays a list of navigation options.
diff --git a/apps/landing/src/app/(detail)/components/[component]/pagination/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/pagination/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/pagination/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/pagination/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/pagination/index.mdx b/apps/landing/src/app/(detail)/components/[component]/pagination/index.mdx
index cf69ad59..7ee4a3ce 100644
--- a/apps/landing/src/app/(detail)/components/[component]/pagination/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/pagination/index.mdx
@@ -1 +1 @@
-`Pagination` component allows users to navigate through multiple pages.
\ No newline at end of file
+`Pagination` component allows users to navigate through multiple pages.
diff --git a/apps/landing/src/app/(detail)/components/[component]/progress-bar/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/progress-bar/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/progress-bar/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/progress-bar/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/progress-bar/index.mdx b/apps/landing/src/app/(detail)/components/[component]/progress-bar/index.mdx
index 8ec889a6..8cb64d36 100644
--- a/apps/landing/src/app/(detail)/components/[component]/progress-bar/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/progress-bar/index.mdx
@@ -1 +1 @@
-`Progress Bar` component displays the progress of a task or operation.
\ No newline at end of file
+`Progress Bar` component displays the progress of a task or operation.
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/index.mdx b/apps/landing/src/app/(detail)/components/[component]/radio/index.mdx
index dbc0cef6..310e1771 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/index.mdx
@@ -1 +1 @@
-`Radio` component allows users to select a single option from a group.
\ No newline at end of file
+`Radio` component allows users to select a single option from a group.
diff --git a/apps/landing/src/app/(detail)/components/[component]/search/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/search/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/search/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/search/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/search/index.mdx b/apps/landing/src/app/(detail)/components/[component]/search/index.mdx
index 1f42be2d..7312ac16 100644
--- a/apps/landing/src/app/(detail)/components/[component]/search/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/search/index.mdx
@@ -1 +1 @@
-`Search` component provides a search input with filtering capabilities.
\ No newline at end of file
+`Search` component provides a search input with filtering capabilities.
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/index.mdx b/apps/landing/src/app/(detail)/components/[component]/select/index.mdx
index c587b299..296464e0 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/index.mdx
@@ -1 +1 @@
-`Select` component allows users to choose from a list of options.
\ No newline at end of file
+`Select` component allows users to choose from a list of options.
diff --git a/apps/landing/src/app/(detail)/components/[component]/slider/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/slider/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/slider/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/slider/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/slider/index.mdx b/apps/landing/src/app/(detail)/components/[component]/slider/index.mdx
index 789d8ff2..05ffa485 100644
--- a/apps/landing/src/app/(detail)/components/[component]/slider/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/slider/index.mdx
@@ -1 +1 @@
-`Slider` component allows users to select a value from a range.
\ No newline at end of file
+`Slider` component allows users to select a value from a range.
diff --git a/apps/landing/src/app/(detail)/components/[component]/snackbar/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/snackbar/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/snackbar/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/snackbar/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/snackbar/index.mdx b/apps/landing/src/app/(detail)/components/[component]/snackbar/index.mdx
index 75cbc49a..cff6e589 100644
--- a/apps/landing/src/app/(detail)/components/[component]/snackbar/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/snackbar/index.mdx
@@ -1 +1 @@
-`Snackbar` component displays brief notifications to users.
\ No newline at end of file
+`Snackbar` component displays brief notifications to users.
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/index.mdx b/apps/landing/src/app/(detail)/components/[component]/stepper/index.mdx
index 9ac4a130..cf99774b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/index.mdx
@@ -1 +1 @@
-`Stepper` component guides users through a multi-step process.
\ No newline at end of file
+`Stepper` component guides users through a multi-step process.
diff --git a/apps/landing/src/app/(detail)/components/[component]/tab/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/tab/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/tab/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/tab/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/tab/index.mdx b/apps/landing/src/app/(detail)/components/[component]/tab/index.mdx
index a86e5651..d50b3049 100644
--- a/apps/landing/src/app/(detail)/components/[component]/tab/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/tab/index.mdx
@@ -1 +1 @@
-`Tab` component organizes content into multiple views.
\ No newline at end of file
+`Tab` component organizes content into multiple views.
diff --git a/apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx b/apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx
index 4572394f..7b361fec 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx
@@ -1 +1 @@
-`Textarea` component is used for multi-line text input.
\ No newline at end of file
+`Textarea` component is used for multi-line text input.
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/index.mdx b/apps/landing/src/app/(detail)/components/[component]/textbox/index.mdx
index c6db46d4..d2432636 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/index.mdx
@@ -1 +1 @@
-`Textbox` component is used for single-line text input.
\ No newline at end of file
+`Textbox` component is used for single-line text input.
diff --git a/apps/landing/src/app/(detail)/components/[component]/theme-button/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/theme-button/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/theme-button/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/theme-button/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/theme-button/index.mdx b/apps/landing/src/app/(detail)/components/[component]/theme-button/index.mdx
index 1cd8b259..5e46418a 100644
--- a/apps/landing/src/app/(detail)/components/[component]/theme-button/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/theme-button/index.mdx
@@ -1 +1 @@
-`Theme Button` component is used to switch between light and dark themes.
\ No newline at end of file
+`Theme Button` component is used to switch between light and dark themes.
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/index.mdx b/apps/landing/src/app/(detail)/components/[component]/toggle/index.mdx
index 2f8973eb..a034d947 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/index.mdx
@@ -1 +1 @@
-`Toggle` component allows users to switch between two states.
\ No newline at end of file
+`Toggle` component allows users to switch between two states.
diff --git a/apps/landing/src/app/(detail)/components/[component]/tooltip/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/tooltip/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/tooltip/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/tooltip/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/tooltip/index.mdx b/apps/landing/src/app/(detail)/components/[component]/tooltip/index.mdx
index 7e79a439..7c8e7b17 100644
--- a/apps/landing/src/app/(detail)/components/[component]/tooltip/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/tooltip/index.mdx
@@ -1 +1 @@
-`Tooltip` component displays additional information on hover.
\ No newline at end of file
+`Tooltip` component displays additional information on hover.
diff --git a/apps/landing/src/app/(detail)/components/[component]/uploader/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/uploader/Api.mdx
index 0519ecba..e69de29b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/uploader/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/uploader/Api.mdx
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/landing/src/app/(detail)/components/[component]/uploader/index.mdx b/apps/landing/src/app/(detail)/components/[component]/uploader/index.mdx
index 150a3bad..15016737 100644
--- a/apps/landing/src/app/(detail)/components/[component]/uploader/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/uploader/index.mdx
@@ -1 +1 @@
-`Uploader` component allows users to upload files.
\ No newline at end of file
+`Uploader` component allows users to upload files.
diff --git a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
index 7129a1dc..d3485904 100644
--- a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
+++ b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
@@ -7,6 +7,21 @@ export function LeftMenu() {
+
+```tsx
+import { Box } from '@devup-ui/react'
-const after =
+function App() {
+ return
+}
+```
+
+The Box component defined above will render like this:
+
+```tsx
+function App() {
+ return
+}
+```
+
+```css
+.a {
+ background: red;
+}
+.b {
+ flex: 1;
+}
+.c {
+ height: 100px;
+}
+.d {
+ width: 400px;
+}
```
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+### Rendering as Another Element
+
You can use the `as` prop to change the element type.
-```typescript
-const before =
+```tsx
+import { Box } from '@devup-ui/react'
+
+function App() {
+ return
+}
+```
-const after =
+By using the as prop, you can render it as another element as shown below:
+
+```tsx
+function App() {
+ return
+}
+```
+
+```css
+.a {
+ background: red;
+}
```
diff --git a/apps/landing/src/app/(detail)/docs/api/button/page.mdx b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
index a3e6c762..0cbc85da 100644
--- a/apps/landing/src/app/(detail)/docs/api/button/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
@@ -12,8 +12,59 @@ The `Button` component is a simple button component that can be used to trigger
## How to use
-```typescript
-const before =
+```tsx
+import { Button } from '@devup-ui/react'
-const after =
+function App() {
+ return (
+
+ )
+}
```
+
+The Button component defined above will render like this:
+
+```tsx
+function App() {
+ return (
+
+ )
+}
+```
+
+```css
+.a {
+ background: red;
+}
+.b {
+ width: 100px;
+}
+.c {
+ height: 100px;
+}
+```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
diff --git a/apps/landing/src/app/(detail)/docs/api/center/page.mdx b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
index 9db755ae..63783ba4 100644
--- a/apps/landing/src/app/(detail)/docs/api/center/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
@@ -1,8 +1,8 @@
export const metadata = {
title: 'Center',
alternates: {
- canonical: '/docs/api/center'
- }
+ canonical: '/docs/api/center',
+ },
}
# Center
@@ -13,20 +13,91 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
## How to use
-````typescript
-const before = (
-
-
-
-
-
-)
-
-const after = (
-
-
-
-
-
-)
-````
+```tsx
+import { Box, Center } from '@devup-ui/react'
+
+function App() {
+ return (
+
+
+
+
+
+ )
+}
+```
+
+The Center component defined above will render like this:
+
+```tsx
+function App() {
+ return (
+
+
+
+
+
+ )
+}
+```
+
+```css
+.a {
+ background: blue;
+}
+.b {
+ height: 100px;
+}
+.c {
+ width: 100px;
+}
+.d {
+ display: flex;
+}
+.e {
+ display: flex;
+}
+.f {
+ justify-content: center;
+}
+.g {
+ align-items: center;
+}
+```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+
+
+Class names and style properties are resolved in the following order:
+
+1. Generate class names for child components.
+ - Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
+
+2. Remove duplicate component properties.
+ - Deduplicate only when both the `key:value` pair and the `style-order` match.
+
+3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
+ - Example: In other words, the `display: flex` implemented internally by `Center` and the `display: flex` provided directly by the user have different style-orders, so they are not removed, and the final style is applied according to priority.
+
+4. Generate the parent component’s className based on the merged result.
+ - After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.
diff --git a/apps/landing/src/app/(detail)/docs/api/css/page.mdx b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
index 792a1f73..ecf1836b 100644
--- a/apps/landing/src/app/(detail)/docs/api/css/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
@@ -17,31 +17,78 @@ export const metadata = {
You can use `css` as a tag function to create a css string. Pass in a string of css properties as an argument, ans it will be converted
into a class list.
-```typescript
-const before = (
-
-)
+```tsx
+import { css } from '@devup-ui/react'
-const after =
+function App() {
+ return (
+
+ )
+}
+```
+
+The content above is rendered/transformed as shown below:
+
+```tsx
+function App() {
+ return
+}
+```
+```css
+.a {
+ background: red;
+}
+.b {
+ width: 100px;
+}
+.c {
+ height: 100px;
+}
```
### CSS Object
You can also use the css function by passing in a css object as an argument.
-```typescript
-const before = (
-
-)
+```tsx
+import { css } from '@devup-ui/react'
-const after =
+function App() {
+ return (
+
+ )
+}
+```
+
+The content above is rendered/transformed as shown below:
+
+```tsx
+function App() {
+ return
+}
+```
+
+```css
+.a {
+ background: red;
+}
+.b {
+ width: 100px;
+}
+.c {
+ height: 100px;
+}
```
diff --git a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
index 3b31f24a..710363a4 100644
--- a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
@@ -14,8 +14,24 @@ It has a `display: flex` style by default.
## How to use
-```typescript
-const before =
+```tsx
+import { Flex } from '@devup-ui/react'
-const after =
+function App() {
+ return
+}
+```
+
+The Flex component defined above will render like this:
+
+```tsx
+function App() {
+ return
+}
+```
+
+```css
+.a {
+ display: flex;
+}
```
diff --git a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
index fe86b9a8..035921d3 100644
--- a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
@@ -14,21 +14,82 @@ It has a `display: grid` style by default.
## How to use
-````typescript
-const before = (
-
-
-
-
-
-)
-
-const after = (
-
+ )
+}
+```
+
+```css
+.a {
+ background: blue;
+}
+.b {
+ height: 100px;
+}
+.c {
+ width: 100px;
+}
+.d {
+ display: grid;
+}
+```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+
+
+Class names and style properties are resolved in the following order:
+
+1. Generate class names for child components.
+ - Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
+
+2. Remove duplicate component properties.
+ - Deduplicate only when both the `key:value` pair and the `style-order` match.
+
+3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
+ - Example: In other words, the `display: flex` implemented internally by `Center` and the `display: flex` provided directly by the user have different style-orders, so they are not removed, and the final style is applied according to priority.
+
+4. Generate the parent component’s className based on the merged result.
+ - After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.
diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
index bacf5e92..a9630224 100644
--- a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
@@ -12,7 +12,7 @@ The `group` selector is used to apply styles to a group of elements. It is used
## How to use
-```typescript
+```tsx
const group = (
diff --git a/apps/landing/src/app/(detail)/docs/api/image/page.mdx b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
index af21b6ea..7d9cbb02 100644
--- a/apps/landing/src/app/(detail)/docs/api/image/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
@@ -14,8 +14,18 @@ It is just a `img` with some styles.
## How to use
-```typescript
-const before =
+```tsx
+import { Image } from '@devup-ui/react'
-const after =
+function App() {
+ return
+}
+```
+
+The Image component defined above will render like this:
+
+```tsx
+function App() {
+ return
+}
```
diff --git a/apps/landing/src/app/(detail)/docs/api/input/page.mdx b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
index 0fc38e63..0efe0dca 100644
--- a/apps/landing/src/app/(detail)/docs/api/input/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
@@ -14,8 +14,24 @@ It is just a `input` with some styles.
## How to use
-```typescript
-const before =
+```tsx
+import { Input } from '@devup-ui/react'
-const after =
+function App() {
+ return
+}
+```
+
+The Input component defined above will render like this:
+
+```tsx
+function App() {
+ return
+}
+```
+
+```css
+.a {
+ border: 3px solid black;
+}
```
diff --git a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
index 338a8b7a..f4811542 100644
--- a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
@@ -8,6 +8,10 @@ export const metadata = {
# Selector
+The attributes defined in Pseudo-Class correspond to those defined in Selector, allowing them to be used directly as component props.
+
+
+
diff --git a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
index e6b32431..42b613b7 100644
--- a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
@@ -8,6 +8,8 @@ export const metadata = {
# Style Props
+The attributes defined in Style Property correspond to those defined in Props, allowing them to be used directly as component props.
+
## Animation
diff --git a/apps/landing/src/app/(detail)/docs/api/text/page.mdx b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
index 965e7e1d..d4ff9e7e 100644
--- a/apps/landing/src/app/(detail)/docs/api/text/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
@@ -14,8 +14,64 @@ It is just a `span` with some styles.
## How to use
-```typescript
-const before = This is Text component.
+```tsx
+import { Text } from '@devup-ui/react'
-const after = This is Text component.
+function App() {
+ return (
+
+ This is Text component.
+
+ )
+}
+```
+
+The Text component defined above will render like this:
+
+```tsx
+function App() {
+ return This is Text component.
+}
+```
+
+```css
+.a {
+ color: red;
+}
+.b {
+ font-size: 24px;
+}
+```
+
+### Rendering as Another Element
+
+You can use the `as` prop to change the element type.
+
+```tsx
+import { Text } from '@devup-ui/react'
+
+function App() {
+ return (
+
+ This is Text component.
+
+ )
+}
+```
+
+The Text component defined above will render like this:
+
+```tsx
+function App() {
+ return
This is Text component.
+}
+```
+
+```css
+.a {
+ color: red;
+}
+.b {
+ font-size: 24px;
+}
```
diff --git a/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx b/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
index de54b927..9133ae7f 100644
--- a/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
@@ -14,20 +14,88 @@ It has a `display: flex` style with `flex-direction: column`.
## How to use
-```typescript
-const before = (
-
-
-
-
-
-)
-
-const after = (
-
+ )
+}
```
+
+```css
+.a {
+ background: blue;
+}
+.b {
+ height: 100px;
+}
+.c {
+ width: 100px;
+}
+.d {
+ display: flex;
+}
+.e {
+ display: flex;
+}
+.f {
+ flex-direction: column;
+}
+```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+
+
+Class names and style properties are resolved in the following order:
+
+1. Generate class names for child components.
+ - Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
+
+2. Remove duplicate component properties.
+ - Deduplicate only when both the `key:value` pair and the `style-order` match.
+
+3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
+ - Example: In other words, the `display: flex` implemented internally by `Center` and the `display: flex` provided directly by the user have different style-orders, so they are not removed, and the final style is applied according to priority.
+
+4. Generate the parent component’s className based on the merged result.
+ - After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.
diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/no-dependencies/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/no-dependencies/page.mdx
new file mode 100644
index 00000000..1ee234ea
--- /dev/null
+++ b/apps/landing/src/app/(detail)/docs/core-concepts/no-dependencies/page.mdx
@@ -0,0 +1,64 @@
+export const metadata = {
+ title: "Core-Concepts",
+ alternates: {
+ canonical: '/docs/core-concepts/no-dependencies',
+ }
+
+}
+
+# No Dependencies
+
+Devup UI converts pure React source code without additional UI runtime code.
+
+This section explains what “No Dependencies” means in practice, why it matters, and how Devup UI achieves it without requiring client-side style engines, extra plugins, or manual pre-generation steps.
+
+## Motivation
+
+- Many CSS-in-JS libraries rely on JavaScript at runtime to compute styles, inject `
-
+
+