React component library that doesn't make assumptions about styling leaving you free to use whatever approach and design you choose.
Accessible All components have been tested with NVDA/Firefox to ensure a good experience for screen reader users
Flexible Using a combination of render callbacks all elements output to the DOM are overridable to achieve any design you wish
Typed Built using TypeScript providing static type checking when using the components along with all the other goodness VSCode provides
Simply add to your project using your dependency manager of choice.
npm i spartan-ui
Then import components for use with your app.
import React from 'react'import Button from 'spartan-ui'const MyButton = <Button>Kick!</Button>
If you are using a standard CSS based approach for your styling you can just apply the relevant
className needed without worrying about conflicting styles or specificity. For example when using a utility class CSS framework like TailwindCSS you could use the following.
import Button from 'spartan-ui'const MyButton =<Button ="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Kick!</Button>
If you are using a CSS in JS library like Styled Components then you can instead use the
as prop to override the base element used by the component renderer.
import Button from 'spartan-ui'import styled from 'styled-components'const StyledButton = styledbutton`background: transparent;border-radius: 3px;border: 2px solid palevioletred;color: palevioletred;margin: 0 1em;padding: 0.25em 1em;`const MyButton = <Button =>Kick!</Button>
All components allow for any props to be passed through the the underlying DOM elements through
...rest spread and all elements are accessible, so pretty much any approach to styling should be feasible including simply just passing down the inline styles.
import Button from 'spartan-ui';<><Button=>Kick</Button></>