@bojalelabs/headless-svelte-ui
v1.1.2
Published
A group of resusable headless components that makes it easy building Svelte Apps, with over 90% of styles props.
Downloads
23
Readme
Welcome to headless-svelte-ui ⭐⚡🔥
A group of resusable headless components that makes it easy building Svelte Apps, with over 90% of styles props.
Installation Headless-svelte-ui
npm i @bojalelabs/headless-svelte-ui
# using yarn
yarn add @bojalelabs/headless-svelte-ui
Getting set up
To start using the components, please follow these steps:
UseButton
import { UseButton } from "@bojalelabs/headless-svelte-ui";
<UseButton>Awesome Headless button from Headless-svelte-ui🔥</UseBotton>
Styling Headless-svelte-ui
Start styling your headless component with css without any external styling.
import { UseButton } from "@bojalelabs/headless-svelte-ui";
<UseButton
_hover={{ bg: '#3333' }}
_focus={{
boxShadow:
'0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15)',
}}
_active={{
bg: '#3333',
transform: 'scale(0.98)',
borderColor: '#ffff',
}}
transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
whiteSpace="nowrap"
borderWidth="2px"
borderColor="black"
display="flex"
align-items="center"
bg="black"
color="white"
height="3rem"
borderRadius="4px"
py="10px"
px="30px"
leftIcon=">
>
Primary Button
</UseButton>