Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justgo97/stylable-ui-components
A CSS-in-JS library for building customizable and responsive UI components in React using props for styling.
https://github.com/justgo97/stylable-ui-components
css css-in-js emotionjs react reactjs stylable styled-component styled-components typescript ui-components ui-design ui-library
Last synced: 8 days ago
JSON representation
A CSS-in-JS library for building customizable and responsive UI components in React using props for styling.
- Host: GitHub
- URL: https://github.com/justgo97/stylable-ui-components
- Owner: justgo97
- License: mit
- Created: 2024-09-23T13:23:08.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-18T13:54:41.000Z (29 days ago)
- Last Synced: 2024-10-19T14:23:06.456Z (28 days ago)
- Topics: css, css-in-js, emotionjs, react, reactjs, stylable, styled-component, styled-components, typescript, ui-components, ui-design, ui-library
- Language: TypeScript
- Homepage:
- Size: 520 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Stylable UI Components
[](https://github.com/justgo97/stylable-ui-components/actions) [](https://www.npmjs.com/package/stylable-ui-components) [](https://www.npmjs.com/package/stylable-ui-components) [](https://github.com/justgo97/stylable-ui-components/blob/main/LICENSE)
A CSS-in-JS library for building customizable and responsive UI components in React using props for styling, It allows for the easy creation of styled components with support for shorthand properties, breakpoints, and pseudo-classes.
## Features
- **Default Components**: Includes a set of common components like `Box`, `Flex`, `Grid`, `Text`, `Button`, and more, ready to be used out-of-the-box.
- **Customizable Styles**: Supports dynamic styling based on props, including shorthand CSS properties and pseudo-classes.
- **Responsive Design**: Built-in support for breakpoints, making it easy to create responsive layouts.
- **Component Factory**: Use (`createSC`) to build new, reusable styled components that fits your UI structure.
## Installation
To install the package, run:
```bash
npm install stylable-ui-components @emotion/styled
```
## Usage
Start by importing the components and using them in your React app:
```tsx
import { Box, Flex, Button, Text } from "stylable-ui-components";
const App = () => (
Hello, world!
alert("Clicked!")}>Click me
);
```
Available Components:
- `Box`, `Flex`, `Grid`, `Text`, `Paragraph`, `Heading`
- `Link`, `Button`, `Input`, `Textarea`, `Image`, `Card`
- `List`, `ListItem`, `Container`, `Badge`, `Avatar`
### Using SCFactory (SC)
You can use the `SC` shorthand to create new styled components dynamically:
```tsx
import { SC } from "stylable-ui-components";
const App = () => (
Custom styled box
);
```
### Creating Components with `createSC`
The `createSC` function allows you to build custom, reusable styled components. You can pass any HTML tag and default styles to it:
```tsx
import { createSC } from "stylable-ui-components";
const CustomHeading = createSC("h2", { color: "purple", fontSize: "24px" });
const App = () => (
This is a custom heading
);
```
## Customizing Styles
Each component accepts CSS props and supports shorthand properties like:
- `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py` for padding
- `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my` for margin
- `bg`, `bgColor`, `minH`, `maxW`, and more
Pseudo-classes like `_hover` and `_selected` can be applied to style components dynamically.
```tsx
Hover me!
```
## Responsive Design
Built-in breakpoints (`_xs`, `_sm`, `_md`, `_lg`, `_xl`, `_xxl`) allow you to create responsive components:
```tsx
Responsive box
```
You can also inline any pseudo-classes within another:
```tsx
Hover Responsive box
```
## Notes
- This is still a **Work in Progress** ⚠️ so some features aren't heavly tested and some syntax changes could occur in newer versions.
- A run time CSS-in-JS solution could be less performant than other approaches in various cases, thus this is more suitable for small and meduim size projects where this issue is insignifcant.
## License
[MIT](LICENSE)