Natively Pluggable Module

    TypeScript icon, indicating that this package has built-in type declarations

    0.2.11 • Public • Published

    Spartan UI

    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>
    export default MyButton


    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 className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">

    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 = styled.button`
      background: transparent;
      border-radius: 3px;
      border: 2px solid palevioletred;
      color: palevioletred;
      margin: 0 1em;
      padding: 0.25em 1em;
    const MyButton = () => <Button as={StyledButton}>Kick!</Button>

    All components allow for any props to be passed through the the underlying DOM elements through 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'
          backgroundColor: '#c62828',
          padding: '0.5rem 1rem',
          borderRadius: '2px',
          color: '#fff',
          border: 0,


    npm i spartan-ui

    DownloadsWeekly Downloads






    Unpacked Size

    169 kB

    Total Files


    Last publish


    • emortlock