@bojalelabs/headless-svelte-ui

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>