repo archived cause Chakra-ui V3 is very close and now uses the same styling API as Panda, which means you can just pick recipe/slot recipes from there and almost copy/paste components !
-> Chakra imports recipes using useRecipe
, with Panda those will be generated in styled-system/recipes
ex: button recipe https://github.com/chakra-ui/chakra-ui/blob/1195171b9ec8b351daf7d36be3f012ccf63ba61d/packages/react/src/theme/recipes/button.ts button component https://github.com/chakra-ui/chakra-ui/blob/1195171b9ec8b351daf7d36be3f012ccf63ba61d/packages/react/src/components/button/button.tsx
pnpm i
pnpm dev
cd packages/components
pnpm demo
![Screenshot 2024-01-03 at 23 48 32](https://private-user-images.githubusercontent.com/47224540/294046587-03ef5fa7-a3bc-40c0-9508-234c255e775e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4OTk4ODMsIm5iZiI6MTcyMzg5OTU4MywicGF0aCI6Ii80NzIyNDU0MC8yOTQwNDY1ODctMDNlZjVmYTctYTNiYy00MGMwLTk1MDgtMjM0YzI1NWU3NzVlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDEyNTk0M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTEyMGM0MzFkZGMyZWFhZjBlNTljNGNmOWQyMDllMjc2NjExOWUwNWRjYzVkNDExN2NkZDQyNDk0YTE0MDljZDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ooRVXk6h9Go1h2xJ5c3DoYBi_6B9pLmHzs9AShwdJ8E)
![Screenshot 2024-01-03 at 23 48 40](https://private-user-images.githubusercontent.com/47224540/294046673-e079155a-bdcf-4cc5-86d8-d72d4c311c9f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4OTk4ODMsIm5iZiI6MTcyMzg5OTU4MywicGF0aCI6Ii80NzIyNDU0MC8yOTQwNDY2NzMtZTA3OTE1NWEtYmRjZi00Y2M1LTg2ZDgtZDcyZDRjMzExYzlmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDEyNTk0M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUxMDU3NTk0NGRkNjhiMTkwYWRjNzY1NzljODBkYjEyYjY0OWU3YWU5ZmI1NTQwYTQ2MjJlODkyMmNkYzhjZDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.7mBSDyeO1vE7UynPKtVwqUVeLuNU1aU_yv8ANbCHA-U)
We only need to watch/rebuild the packages/preset-chakra
due to using
custom conditions,
since Panda doesn't support them yet.
Updating the packages/preset-chakra
will trigger a static.css
file
generation, which is used by the demo.
-
update Ark-UI and remove all the pasted UseXXXProps types when v1 is released
-
create other frameworks implementation, only the React one is done
-
for each frameworks, export 2 different versions:
- for Panda users, with
@crepe-ui/styled-system
as external dependency - for non-Panda users, with everything bundled
- for Panda users, with
-
make a version of the components that is RSC-compatible = without
createStyleContext
- could use
defineParts
- or could just keep using slots but with explicit props passing
- could use
Editable, Number Input, Pin Input, Radio, Range Slider, Slider, Stat, Circular Progress, Spinner, Toast, Highlight, Drawer, Menu, Accordion, Breadcrumb, Stepper