Documentation

glitterkit is a UI system for frontend development. Using a command line interface, you can quickly generate components in your project.

maximum flexibility & transparency
zero dependencies
lightweight
framework agnostic

Currently supported frameworks include:

react/typescript
svelte5/typescript

Setup your project

Setting up glitterkit is fast and easy. Follow the same steps when adding it to a new or existing project.

npx glitterkit setup

Components

Components in glitterkit are meant to be primitive, composable and use web-standard props as much as possible.

Props that are unique to glitterkit will be minimal. Our goal is to include only props that strike a good balance between convenience and clarity, following intuitive patterns that are easy to learn.

You will notice the styles are minimal. The ideal workflow is to build out a functional UI quickly and sync your kit styles automatically. Kits will be a paid feature, but of course there are free alternatives:

Any component can be extended and fully customized using npx glitterkit extend [component]
Use tailwindcss to style components as you go
Extend glitterkit components with styled-components
Use a plain old CSS stylesheet to target any of the glitterkit-* styles you want

Flexibility is our core priority, glitterkit does not lock you in to just one approach.

Badge

Uses standard HTML div attributes and renders children text.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div

Component Preview

Sassy

Fresh

Classy

Add to your project

Run terminal command

$glitterkit add

Badge

A small but mighty tag that adds instant flair to anything.

Button

Click it and something hopefully useful happens.

Card

A stylish container that keeps content tidy.

Import and use the component

~/your-project/file.tsx

      
        import Badge from 'src/glitterkit/Badge'

// standard html div attributes 
<Badge style="background-color: peachpuff;">
  It's Peachy
</Badge>

Generated source code

~/your-project/src/glitterkit/Badge.tsx

      
        import React from 'react'
import './Badge.css'

const Badge = ({ children, ...props }: React.ComponentProps<'div'>) => (
  <div className="glitterkit-Badge" {...props}>
    {children}
  </div>
)

export default Badge

Button

Uses standard HTML button attributes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button

Component Preview

Add to your project

Run terminal command

$glitterkit add

Badge

A small but mighty tag that adds instant flair to anything.

Button

Click it and something hopefully useful happens.

Card

A stylish container that keeps content tidy.

Import and use the component

~/your-project/file.tsx

      
        import Button from 'src/glitterkit/Button'

// standard html button attributes 
<Button type="submit" />

Generated source code

~/your-project/src/glitterkit/Button.tsx

      
        import React from 'react'
import './Button.css'

const Button = ({ children, ...props }: React.ComponentProps<'button'>) => (
  <button className="glitterkit-Button" {...props}>{children}</button>
)

export default Button

Card

Uses standard HTML div attributes and renders any children.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div

Component Preview

Cards can wrap up anything nicely

My friend Rick makes this trippy artwork on Unsplash, go feast your eyes!

Add to your project

Run terminal command

$glitterkit add

Badge

A small but mighty tag that adds instant flair to anything.

Button

Click it and something hopefully useful happens.

Card

A stylish container that keeps content tidy.

Import and use the component

~/your-project/file.tsx

      
        import Card from 'src/glitterkit/Card'

// standard html div attributes 
<Card>
 Anything you can think of 
</Card>

Generated source code

~/your-project/src/glitterkit/Card.tsx

      
        import React from 'react'
import './Card.css'

const Card = ({ children, ...props }: React.ComponentProps<'div'>) => (
  <div className="glitterkit-Card" {...props}>
    {children}
  </div>
)

export default Card

Checkbox

Uses standard HTML input attributes, but restricts the type to 'checkbox'.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox

Component Preview

Check me out

Add to your project

Run terminal command

$glitterkit add

Card

A stylish container that keeps content tidy.

Checkbox

The classic 'yes' or 'no' box, but with way less drama.

Input

A blank space waiting for user input, just hoping they behave.

Import and use the component

~/your-project/file.tsx

      
        import Label from 'src/glitterkit/Label'
import Checkbox from 'src/glitterkit/Checkbox'

// standard html attributes, 
// always used with a label
<Label>
  <Checkbox name="remember" /> Remember me on this device 
</Label>

Generated source code

~/your-project/src/glitterkit/Checkbox.tsx

      
        import React from 'react'
import './Checkbox.css'

const Checkbox = ({ children, ...props }: Omit<React.ComponentProps<'input'>, 'type'>) => (
  <>
    <input className="glitterkit-Checkbox" type="checkbox" {...props} />
    <span className="glitterkit-Checkbox_check"></span>
  </>
)

export default Checkbox

Input

Uses standard HTML input attributes with a few exceptions. It excludes type 'range' because we have a specific component designed for that.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input

Component Preview

Add to your project

Run terminal command

$glitterkit add

Card

A stylish container that keeps content tidy.

Input

A blank space waiting for user input, just hoping they behave.

Label

The helpful little tag that tells inputs what they're supposed to be.

Import and use the component

~/your-project/file.tsx

      
        import Input from 'src/glitterkit/Input'

// standard html input attributes 
<Input type="text" name="fullName" />

Generated source code

~/your-project/src/glitterkit/Input.tsx

      
        import React from 'react'
import './Input.css'

const Input = (
  props: Partial<
    React.ComponentProps<'input'> & {
      type:
        | 'text'
        | 'number'
        | 'file'
        | 'email'
        | 'url'
        | 'time'
        | 'tel'
        | 'search'
        | 'password'
        | 'week'
        | 'month'
        | 'year';
    }
  >,
) => <input className="glitterkit-Input" type="text" {...props} />

export default Input

Label

Uses standard HTML label attributes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label

Component Preview

Full Name

Add to your project

Run terminal command

$glitterkit add

Card

A stylish container that keeps content tidy.

Input

A blank space waiting for user input, just hoping they behave.

Label

The helpful little tag that tells inputs what they're supposed to be.

Import and use the component

~/your-project/file.tsx

      
        import Label from 'src/glitterkit/Label'

// standard html label usage with Input
<Label>
  Full Name 
  <Input type="text" name="fullName" />
</Label>

Generated source code

~/your-project/src/glitterkit/Label.tsx

      
        import React from 'react'
import './Label.css'

const Label = ({ children, ...props }: React.ComponentProps<'label'>) => (
  <label className="glitterkit-Label" {...props}>
    {children}
  </label>
)

export default Label

ProgressBar

Uses standard HTML div attributes with an extra prop for 'percentage' of type number.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div

Component Preview

Add to your project

Run terminal command

$glitterkit add

Label

The helpful little tag that tells inputs what they're supposed to be.

ProgressBar

A friendly reminder that you're not done yet, so keep going.

RangeSlider

A fun little bar that lets users estimate precision, poorly.

Import and use the component

~/your-project/file.tsx

      
        import ProgressBar from 'src/glitterkit/ProgressBar'
 
<ProgressBar percentage={33} />

Generated source code

~/your-project/src/glitterkit/ProgressBar.tsx

      
        import React from 'react'
import './ProgressBar.css'

const ProgressBar = (
  props: React.ComponentProps<'div'> & { percentage: number },
) => {
  const { percentage, ...p } = props

  return (
    <div className="glitterkit-ProgressBar" {...p}>
        <div className="progress" style={{ width: percentage + '%' }} />
    </div>
  )
}

export default ProgressBar

RangeSlider

Uses standard HTML input attributes for type="range".

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range

Component Preview

Add to your project

Run terminal command

$glitterkit add

ProgressBar

A friendly reminder that you're not done yet, so keep going.

RangeSlider

A fun little bar that lets users estimate precision, poorly.

Textarea

A big, open space where users can ramble on forever.

Import and use the component

~/your-project/file.tsx

      
        import RangeSlider from 'src/glitterkit/RangeSlider'
 
// standard html input props
<RangeSlider name="age" />

Generated source code

~/your-project/src/glitterkit/RangeSlider.tsx

      
        import React from 'react'
import './RangeSlider.css'

const RangeSlider = (props: React.ComponentProps<'input'>) => (
  <input className="glitterkit-RangeSlider" type="range" {...props} />
)

export default RangeSlider

Switch

Uses standard HTML input attributes, but restricts the type to 'checkbox' and the role to 'switch'.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox

Component Preview

Turn me on

Add to your project

Run terminal command

$glitterkit add

RangeSlider

A fun little bar that lets users estimate precision, poorly.

Switch

A tiny toggle for flipping things on and off, like dark mode or bad decisions

Textarea

A big, open space where users can ramble on forever.

Import and use the component

~/your-project/file.tsx

      
        import Label from 'src/glitterkit/Label'
import Switch from 'src/glitterkit/Switch'

// standard html attributes,
// always used with a label
<Label>
  <Switch name="toggled" /> Toggle me!
</Label>

Generated source code

~/your-project/src/glitterkit/Switch.tsx

      
        import React from 'react'
import './Switch.css'

const Switch = (props: Omit<React.ComponentProps<'input'>, 'type' | 'role'>) => (
  <div className="glitterkit-Switch">
    <input
      className="glitterkit-Switch_input"
      type="checkbox"
      role="switch"
      {...props}
    />
    <div className="glitterkit-Switch_slider"></div>
  </div>
)

export default Switch

Textarea

Uses standard HTML textarea attributes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea

Component Preview

Add to your project

Run terminal command

$glitterkit add

ProgressBar

A friendly reminder that you're not done yet, so keep going.

RangeSlider

A fun little bar that lets users estimate precision, poorly.

Textarea

A big, open space where users can ramble on forever.

Import and use the component

~/your-project/file.tsx

      
        import Textarea from 'src/glitterkit/Textarea'

// standard html textarea attributes 
<Textarea name="ramblings" />

Generated source code

~/your-project/src/glitterkit/Textarea.tsx

      
        import React from 'react'
import './Textarea.css'

const Textarea = (props: React.ComponentProps<'textarea'>) => (
  <textarea className="glitterkit-Textarea" {...props} />
)

export default Textarea