spicy-ui / core

🌶️ A themable and extensible React UI library, ready to use out of the box

spicy-ui

🌶️ A themable and extensible React UI library, ready to use out of the box

Basic usage

Install Spicy UI to your React project with npm i @spicy-ui/core styled-components

import React from 'react';
import { Button, ThemeProvider } from '@spicy-ui/core';

export const App = () => (
  <ThemeProvider>
    <Button>Hey hot stuff 🌶️</Button>
  </ThemeProvider>
);

See the documentation for components, theming and advanced usage.

Issues and Bugs

If you happen to find any, please report them here so they can be squashed.

Development and Contributing

Pull the repo and then install dependencies with npm.

In the root directory, use npm run start:storybook to run Storybook on localhost:9000

See the package.json for other scripts such as clean, test and lint.

License

MIT, see the LICENSE file.

core's Issues

Can't apply `as` prop to `Stack` component

Sometimes I'd like to replace the HTML element the Stack component renders as, but trying to apply an as prop into Stack gives out a type error. (The correct element still renders, though.)

`.noscroll` class is missing from global styles

Looks like the .noscroll class was accidentally removed from the global styles in #29.

It should be re-added

Note: Project not being maintained anymore

Most projects I have that were using spicy-ui/core have now begun to (or are planned to) be migrated to Chakra UI.

Thus, this project isn't really being maintained anymore. Repo will remain open and I'll help if any random issues come through (but I suspect none will 😆 )

Stack `flexDir` prop doesn't apply margin direction correctly

The Stacks flexDir prop doesn't apply margin direction correctly as it should

`transitionTimingFunction` style isn't applied correctly

transitionTimingFunction style doesn't correctly apply it's scale when used via sx or in component theme configs

NB: it might be an issue in spicy-ui/styled-system rather than spicy-ui/core

Select component `autoFocus` prop

The select component is missing an autoFocus prop

Menu component in Stack has margin applied

A menu component placed inside the Stack inherits the child styling the Stack applies.

Menu component: expose internal menu `onClose` to children

Expose the onClose function that's currently internal in the menu to the children of the menu so that they can implement programmatic closing of the menu (in cases where the menu component doesn't necessarily control the state)