See our blog post for more details on this release: https://reflex.dev/blog/2024-02-16-reflex-v0.4.0
Known Issues
Hot reload on windows does not seem to work (Under investigation)
Breaking Changes
Top-level Namespace is now Radix Components
See the latest Reflex documentation for complete information about the new components API.
**Run `reflex script keep-chakra` to retain compatibility with 0.3.x apps.**
This script will automatically update your app code to reference previous top-level namespace via `rx.chakra.<x>`
Some components are no longer available in the core library and must now be accessed via `rx.chakra` such as:
- `circular_progress`
- `stat` and `stat_group`
- `list` (Use `rx.unordered_list(list_style_type="none")` instead)
- `pin_input`
- `circle`
- `button_group`
Component Prop Changes
- `rx.progress` no longer supports `is_indeterminate`
- `rx.slider`: `value` is expected to be a list of numbers, one for each slider thumb. `on_change` will be called with a list of numbers, one for each slider thumb.
- `rx.vstack` and `rx.hstack` no longer center content by default.
- `rx.icon` uses [Lucide](https://lucide.dev/icons/) tags (`rx.chakra.icon` for the previous tags)
- `spacing` and `size` props accept radix scale, generally string integers, from "0" to "9".
- To apply CSS units, use CSS props like `gap`, `height`, `width`, `padding`, etc.
- `type_`, `max_`, and `min_` props should be specified without the trailing underscore.
Radix Themes
Apply themes to the root `rx.App` component via the `theme=rx.theme(...)` prop. This will apply the theme to all radix components.
New Features
Upload Workflow Refactor
- Set upload dir via environment variable `REFLEX_UPLOADED_FILES_DIR`, which defaults to `./uploaded_files`.
- Use `rx.get_upload_dir()` to access the upload directory from the backend.
- Use `rx.get_upload_url(filename)` to get a link to the uploaded file in the frontend.
`rx.download` now accepts `str` or `bytes` for `data` argument
Allow users to download data directly from the backend without writing to an intermediate file.
All Changes
* Clean up Radix Form component by martinxu9 in https://github.com/reflex-dev/reflex/pull/2423
* auto enable /_upload endpoint only if Upload component is used by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2430
* extend state inheritance tests with non-computed vars by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2425
* parse return type annotations of sqlalchemy hybrid properties by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2422
* Input high level api by picklelo in https://github.com/reflex-dev/reflex/pull/2410
* radix link renders as next link by default use by martinxu9 in https://github.com/reflex-dev/reflex/pull/2440
* test_telemetry fails for Python Version 3.11.0rc1 by Yummy-Yums in https://github.com/reflex-dev/reflex/pull/2431
* Docstrings for radix components by masenf in https://github.com/reflex-dev/reflex/pull/2407
* [REF-1692] re-enable partial reflex web windows by masenf in https://github.com/reflex-dev/reflex/pull/2436
* Vardata for rx.Match by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2439
* fix SmartDisplay visible parameter by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2451
* Individually Import Chakra Packages by Alek99 in https://github.com/reflex-dev/reflex/pull/2405
* small changes to texfield and separator by tgberkeley in https://github.com/reflex-dev/reflex/pull/2448
* use multiprocessing to speed up pyi generation by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2453
* Chakra IconButton comes from "chakra-ui/button2.1.0" package by masenf in https://github.com/reflex-dev/reflex/pull/2465
* Accordion style merge issue fix by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2446
* fixed issue with hypens by wassafshahzad in https://github.com/reflex-dev/reflex/pull/2450
* pyi generator git diff by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2460
* [REF-1746] Define `value` prop on base rx.el.textarea by masenf in https://github.com/reflex-dev/reflex/pull/2467
* minor update to callout by tgberkeley in https://github.com/reflex-dev/reflex/pull/2466
* [WIP] rx.color by Alek99 in https://github.com/reflex-dev/reflex/pull/2443
* Revert "Individually Import Chakra Packages (2405)" by picklelo in https://github.com/reflex-dev/reflex/pull/2472
* add separator default width to fill the container by tgberkeley in https://github.com/reflex-dev/reflex/pull/2459
* Remove modal prop from Dialog by martinxu9 in https://github.com/reflex-dev/reflex/pull/2470
* [REF-1763] Rename `color` to `color_scheme` in all radix themes components by masenf in https://github.com/reflex-dev/reflex/pull/2468
* Set correct type when indexing into Var[str] by picklelo in https://github.com/reflex-dev/reflex/pull/2469
* add lucide icons as a candidate for core icon library by Lendemor in https://github.com/reflex-dev/reflex/pull/2444
* Pass down themes for `rx.cond` and `rx.match` by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2432
* Use form_root as form high level API by martinxu9 in https://github.com/reflex-dev/reflex/pull/2479
* Update meta parameter to accept a list of any type by kumaraguru1735 in https://github.com/reflex-dev/reflex/pull/2477
* [REF-1632] Apply `rx.App` styles to Radix Themes root `div` by masenf in https://github.com/reflex-dev/reflex/pull/2481
* Radix primitive based Drawer component by martinxu9 in https://github.com/reflex-dev/reflex/pull/2445
* Add git precommit hook that generates pyi files by martinxu9 in https://github.com/reflex-dev/reflex/pull/2447
* Tabs validate parent is proper tab container by tankztz in https://github.com/reflex-dev/reflex/pull/2463
* [REF-1815] Radix themes: replace `color_scheme` with `color` in get_fields by masenf in https://github.com/reflex-dev/reflex/pull/2486
* fix kebab case for lucide icon by Lendemor in https://github.com/reflex-dev/reflex/pull/2487
* fix color of icon to match theme by Lendemor in https://github.com/reflex-dev/reflex/pull/2488
* Fix pyi_generator relative path determination by masenf in https://github.com/reflex-dev/reflex/pull/2485
* add center / spacer / hstack / vstack in radix/themes/layout by Lendemor in https://github.com/reflex-dev/reflex/pull/2331
* simple pytest benchmark for measuring event <=> state update round trip time by jackie-pc in https://github.com/reflex-dev/reflex/pull/2489
* improve sqlalchemy type parsing by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2474
* Fix accordion pyi by picklelo in https://github.com/reflex-dev/reflex/pull/2491
* [REF-1738] Remove radix-specific layout/margin props by masenf in https://github.com/reflex-dev/reflex/pull/2442
* [REF-1742] Radio group prop types fix by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2452
* Added Environmental variable REFLEX_DIR by wassafshahzad in https://github.com/reflex-dev/reflex/pull/2457
* Minor fix on pyi generator to make it work in Windows by tankztz in https://github.com/reflex-dev/reflex/pull/2494
* Revert "Revert "use process pool to compile faster (2377)" (2434)" by jackie-pc in https://github.com/reflex-dev/reflex/pull/2497
* [0.4.0] Namespace the Drawer primitive subcomponents by masenf in https://github.com/reflex-dev/reflex/pull/2492
* Rework telemetry to support installation_id by jackie-pc in https://github.com/reflex-dev/reflex/pull/2480
* Support component create methods as keys in global styles by picklelo in https://github.com/reflex-dev/reflex/pull/2498
* Add props from Radix tooltip primitives to tooltip component by martinxu9 in https://github.com/reflex-dev/reflex/pull/2499
* [REF-1631] Clean up the rx.radix namespace by masenf in https://github.com/reflex-dev/reflex/pull/2501
* enable CI on reflex-0.4.0 branch by masenf in https://github.com/reflex-dev/reflex/pull/2502
* radix Theme panel_background prop: transparent -> translucent by martinxu9 in https://github.com/reflex-dev/reflex/pull/2504
* Update hosting CLI version in the poetry lock: 0.1.3 -> 0.1.7 by martinxu9 in https://github.com/reflex-dev/reflex/pull/2503
* All event handlers inherit from event triggers by tgberkeley in https://github.com/reflex-dev/reflex/pull/2507
* Move `is_used` to Upload component rather than UploadFilesProvider by masenf in https://github.com/reflex-dev/reflex/pull/2514
* fix appharness regex for functions with return type by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2512
* Add comment for theme panel needed for docs by Alek99 in https://github.com/reflex-dev/reflex/pull/2508
* [REF-1839] Reserve top-level __call__ for a future high level API by masenf in https://github.com/reflex-dev/reflex/pull/2518
* fix icon_button to size children lucide icon correctly. by Lendemor in https://github.com/reflex-dev/reflex/pull/2515
* Move core components to radix namespace by picklelo in https://github.com/reflex-dev/reflex/pull/2506
* Refactor rx.color by Alek99 in https://github.com/reflex-dev/reflex/pull/2522
* Add dropdown props inherited from their primitive counterparts by martinxu9 in https://github.com/reflex-dev/reflex/pull/2521
* Top-level namespace tweaks by masenf in https://github.com/reflex-dev/reflex/pull/2523
* inline memoize components in compiled page files, to prevent hot reload errors by jackie-pc in https://github.com/reflex-dev/reflex/pull/2527
* bump to 0.3.10 by masenf in https://github.com/reflex-dev/reflex/pull/2530
* Radix Components Valid children/parents by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2495
* Remove focus-visible package by picklelo in https://github.com/reflex-dev/reflex/pull/2535
* remove radix icons by Lendemor in https://github.com/reflex-dev/reflex/pull/2538
* Don't purge web dir if flag is set by picklelo in https://github.com/reflex-dev/reflex/pull/2529
* Map Accordion color schemes to radix colors by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2511
* [REF-1743] Implement radix-native color mode switch and button by masenf in https://github.com/reflex-dev/reflex/pull/2526
* Increase debounce timeout to 300ms by picklelo in https://github.com/reflex-dev/reflex/pull/2541
* Support for Shorthand css props. by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2547
* update slider so width automatically set and default value automatica… by tgberkeley in https://github.com/reflex-dev/reflex/pull/2542
* ordered & unordered lists by Lendemor in https://github.com/reflex-dev/reflex/pull/2537
* fix EventHandlers and ComputedVars inherited by mixin classes by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/2534
* state.js: determine upload URL dynamically by masenf in https://github.com/reflex-dev/reflex/pull/2531
* many small changes from going over all props by tgberkeley in https://github.com/reflex-dev/reflex/pull/2532
* Text default as p by Alek99 in https://github.com/reflex-dev/reflex/pull/2551
* CLI script to maintain Chakra backed components in rx namespace in older apps by jackie-pc in https://github.com/reflex-dev/reflex/pull/2322
* Decorator to validate `rx.color` prop fields by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2553
* rx.color to work with conditional vars by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2546
* Fix missing getEventURL function in connection banner by masenf in https://github.com/reflex-dev/reflex/pull/2557
* (dev mode) start backend without waiting for page compilation by jackie-pc in https://github.com/reflex-dev/reflex/pull/2549
* Use rx.el.img as rx.image by masenf in https://github.com/reflex-dev/reflex/pull/2558
* [REF-1921] Remove HTML attributes that shadow CSS props by masenf in https://github.com/reflex-dev/reflex/pull/2566
* Fix race condition in test_client_storage by masenf in https://github.com/reflex-dev/reflex/pull/2568
* Get `rx.color` working with fstrings by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2562
* remove extra props on scroll area by picklelo in https://github.com/reflex-dev/reflex/pull/2581
* Alias form to form.root by martinxu9 in https://github.com/reflex-dev/reflex/pull/2579
* test_call_script: update poll ending condition to avoid race by masenf in https://github.com/reflex-dev/reflex/pull/2583
* Upload Workflow Refactor by masenf in https://github.com/reflex-dev/reflex/pull/2309
* fix match import in iconbutton by Lendemor in https://github.com/reflex-dev/reflex/pull/2552
* Convert templates to use `rx.chakra` where needed by masenf in https://github.com/reflex-dev/reflex/pull/2555
* keep-chakra: whitelist is always whitelist by masenf in https://github.com/reflex-dev/reflex/pull/2585
* banner.py: fix import specification for getBackendURL by masenf in https://github.com/reflex-dev/reflex/pull/2584
* Remove dropdown menu sub content extra props by tgberkeley in https://github.com/reflex-dev/reflex/pull/2582
* Update progress style by picklelo in https://github.com/reflex-dev/reflex/pull/2570
* Vaul Drawer Alias by Alek99 in https://github.com/reflex-dev/reflex/pull/2586
* Fix operator precedence by invrainbow in https://github.com/reflex-dev/reflex/pull/2573
* Fixes to rx.progress by invrainbow in https://github.com/reflex-dev/reflex/pull/2588
* Rename components in top level namespace by picklelo in https://github.com/reflex-dev/reflex/pull/2589
* [REF-1958] Remove shadowed radix css props by masenf in https://github.com/reflex-dev/reflex/pull/2590
* Expose `get_upload_url` and `get_upload_dir` at top level by masenf in https://github.com/reflex-dev/reflex/pull/2587
* [REF-1925]Accordion foreach fix by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2598
* print background compile errors ASAP by jackie-pc in https://github.com/reflex-dev/reflex/pull/2596
* sub form.root to form class solely for documentation by martinxu9 in https://github.com/reflex-dev/reflex/pull/2594
* connectionError modal now use Radix only by Lendemor in https://github.com/reflex-dev/reflex/pull/2593
* Update input to use textfield input by picklelo in https://github.com/reflex-dev/reflex/pull/2599
* Revert "Revert "Revert "use process pool to compile faster (2377)" (2434)" (2497)" by jackie-pc in https://github.com/reflex-dev/reflex/pull/2595
* rx.download accepts `data` arg as either str or bytes by tgberkeley in https://github.com/reflex-dev/reflex/pull/2493
* [REF-1840] Clean up `color_scheme` mapping by masenf in https://github.com/reflex-dev/reflex/pull/2602
* Fix AccordionItem interactive docs not showing up by invrainbow in https://github.com/reflex-dev/reflex/pull/2600
* [REF-1919]Valid Children/parents to allow Foreach,Cond,Match and Fragment by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2591
* Fix rx.progress to support `max` prop by invrainbow in https://github.com/reflex-dev/reflex/pull/2601
* Fix fstrings being escaped improperly by invrainbow in https://github.com/reflex-dev/reflex/pull/2571
* Fix comments on drawer by Alek99 in https://github.com/reflex-dev/reflex/pull/2604
* update docstrings for Dialog components by Lendemor in https://github.com/reflex-dev/reflex/pull/2608
* add typography/span in radix by Lendemor in https://github.com/reflex-dev/reflex/pull/2607
* Accordion var data Attribute Error Fix by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2611
* Apply themes to drawer content by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2612
* Inherit _rename_props from parent classes by masenf in https://github.com/reflex-dev/reflex/pull/2613
* Update docstrings for Radix components based on upstream descriptions by masenf in https://github.com/reflex-dev/reflex/pull/2615
* fix value/default_value in accordion by Lendemor in https://github.com/reflex-dev/reflex/pull/2616
* Use align start by default stacks by picklelo in https://github.com/reflex-dev/reflex/pull/2619
* Text `as_` prop literals update by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2620
* Unbreak demo app by masenf in https://github.com/reflex-dev/reflex/pull/2623
* Spacing literal should include "0" by martinxu9 in https://github.com/reflex-dev/reflex/pull/2622
* align vstack in blank demo app by timmypidashev in https://github.com/reflex-dev/reflex/pull/2625
* [REF-1902] [REF-1987] Chakra upgrade message by masenf in https://github.com/reflex-dev/reflex/pull/2624
* Simplify app template by picklelo in https://github.com/reflex-dev/reflex/pull/2627
* accordion default classname by Lendemor in https://github.com/reflex-dev/reflex/pull/2628
* set default align stack by Lendemor in https://github.com/reflex-dev/reflex/pull/2626
* Handle component namespaces in global styles by picklelo in https://github.com/reflex-dev/reflex/pull/2630
* rx.theme: Recognize `color_mode` in addition to `appearance` by masenf in https://github.com/reflex-dev/reflex/pull/2635
* Update new readme to match radix api by Alek99 in https://github.com/reflex-dev/reflex/pull/2631
* Use horizontal layout for radio by default by picklelo in https://github.com/reflex-dev/reflex/pull/2637
* Component: translate underscore suffix for props supported by chakra by masenf in https://github.com/reflex-dev/reflex/pull/2636
* Fix more information link to v0.4.0 blog post by masenf in https://github.com/reflex-dev/reflex/pull/2638
* Quick fixes for regressions in 0.4.0 by masenf in https://github.com/reflex-dev/reflex/pull/2639
* [REF-1984]Drawer component styles should only be in css dict by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2640
* Reflex 0.4.0 🚀 by masenf in https://github.com/reflex-dev/reflex/pull/2641
* Update deprecation version to 0.5.0 by picklelo in https://github.com/reflex-dev/reflex/pull/2642
* workflows: remove references to now-defunct reflex-0.4.0 branch by masenf in https://github.com/reflex-dev/reflex/pull/2643
* Deprecate get_asset_path by picklelo in https://github.com/reflex-dev/reflex/pull/2644
New Contributors
* Yummy-Yums made their first contribution in https://github.com/reflex-dev/reflex/pull/2431
* kumaraguru1735 made their first contribution in https://github.com/reflex-dev/reflex/pull/2477
* tankztz made their first contribution in https://github.com/reflex-dev/reflex/pull/2463
* invrainbow made their first contribution in https://github.com/reflex-dev/reflex/pull/2573
* timmypidashev made their first contribution in https://github.com/reflex-dev/reflex/pull/2625
**Full Changelog**: https://github.com/reflex-dev/reflex/compare/v0.3.9...v0.4.0