Doomd Components

I just wanted a place to put all my re-usable components so if I improve one of them, all dependent projects can benefit...

Use at your own peril.

Components:

• <TW>

  • NOT CURRENTLY USEFUL. A wrapper that will add default Tailwind base styles to any component. Useful only if you're importing 3rd party components that used tailwind classes, but didn't include the base styling. This does not yet inject the component classes.

• <NoTW>

  • A wrapper that will nullify any Tailwind classes in the component (using the all css property).

  • @prop all = 'unset' | 'initial' | 'inherit' | 'revert'

    Example usage:

    <NoTW>
      <ComponentWithTailwindClasses />
    </NoTW>
    
    <NoTW all="revert">
      <ComponentWithTailwindClasses />
    </NoTW>
    

• <ColorPickerV2>

  • A bindable color picker that has a random color generator built in (you can optionally disable this).

Constants

• emojis: object with keyed arrays broken down by categories including: animals, activities, nature, objects, clothing, food, gestures, people, travel

  Usage Example:

  <script lang="ts">
  import { emojis } from '@doomd/components'
  let animals: string[] = emojis.animals
  </script>
  
  {#each animals as emoji}
    <span class="text-xl">{emoji}</span>
  {/each}

Notes:

All components are written with Svelte & Typescript.