stylable-ui-components
v0.0.8
Published
A CSS-in-JS solution for building stylable components in React
Downloads
35
Maintainers
Readme
Stylable UI Components
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:
npm install stylable-ui-components @emotion/styled
Usage
Start by importing the components and using them in your React app:
import { Box, Flex, Button, Text } from "stylable-ui-components";
const App = () => (
<Flex justify="center" align="center" p={4}>
<Box bgColor="lightgray" p={3} borderRadius={8}>
<Text fontSize={20} mb={2}>
Hello, world!
</Text>
<Button onClick={() => alert("Clicked!")}>Click me</Button>
</Box>
</Flex>
);
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:
import { SC } from "stylable-ui-components";
const App = () => (
<SC.div backgroundColor="lightblue" padding="16px">
Custom styled box
</SC.div>
);
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:
import { createSC } from "stylable-ui-components";
const CustomHeading = createSC("h2", { color: "purple", fontSize: "24px" });
const App = () => (
<CustomHeading mb={2}>This is a custom heading</CustomHeading>
);
Customizing Styles
Each component accepts CSS props and supports shorthand properties like:
p
,pt
,pr
,pb
,pl
,px
,py
for paddingm
,mt
,mr
,mb
,ml
,mx
,my
for marginbg
,bgColor
,minH
,maxW
, and more
Pseudo-classes like _hover
and _selected
can be applied to style components dynamically.
<Button p="1rem" _hover={{ backgroundColor: "darkgray" }}>
Hover me!
</Button>
Responsive Design
Built-in breakpoints (_xs
, _sm
, _md
, _lg
, _xl
, _xxl
) allow you to create responsive components:
<Box _md={{ backgroundColor: "lightgreen" }}>Responsive box</Box>
You can also inline any pseudo-classes within another:
<Box _hover={{ bgColor: "beige", _md: { backgroundColor: "lightgreen" } }}>
Hover Responsive box
</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.