@isolonenko/nova-ui v1.0.11
@isolonenko/nova-ui
Overview
@isolonenko/nova-ui
is a lightweight, zero dependecy package written in TypeScript
that simplifies styling by providing a component. This component behaves like a standard , but it allows you to define CSS styles using a css
property. The styles you provide are automatically transformed into CSS rules and applied as a unique className, making it easy to manage and organize your styles.
Features
- Component: A flexible and customizable container that can be styled using the
css
property.
Installation
You can quickly get started with @isolonenko/nova-ui
by installing it via yarn
or npm
.
Yarn
yarn add -D @isolonenko/nova-ui
NPM
npm install --save-dev @isolonenko/nova-ui
Getting started
Import the Box component from nova-ui and start using it in your project.
import { Box } from '@isolonenko/nova-ui'
const MyComponent = () => {
return (
<Box
css={{
backgroundColor: 'red',
// Add more CSS properties here
}}
>
Hello, world!
</Box>
)
}
Usage
The css property of the component accepts an object where keys are CSS properties, and values are the corresponding property values. You can define any valid CSS styles to customize the appearance of the component. The library will generate a unique className
for the provided styles and apply them to the component.
Example
import { Box } from '@isolonenko/nova-ui'
const StyledBox = () => {
return (
<Box
css={{
backgroundColor: 'lightblue',
padding: '20px',
borderRadius: '8px',
boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
}}
>
This is a beautifully styled box!
</Box>
)
}
Hope you find @isolonenko/nova-ui
useful for simplifying styling in your projects. If you have any questions, issues, or feature requests, please feel free to open an issue here https://github.com/isolonenko/nova-ui/issues.