by cssninja.io

---

Shuriken UI - Tailwind CSS

Shuriken UI is a free and open-source Tailwind CSS UI Kit. It is a collection of components and templates that you can use to build your next Tailwind CSS project.

This package contains the Tailwind CSS preset, components, and shared utils like custom colors used in Shuriken UI.

Installation

pnpm install -D @shuriken-ui/tailwind

Usage

The simplest way to register Shuriken UI is to use withShurikenUI helper function.

// tailwind.config.ts
import { withShurikenUI } from '@shuriken-ui/tailwind'

export default withShurikenUI({
  // your config
})

You can also direcly import the preset and use it in your config.

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import preset from '@shuriken-ui/tailwind/preset'

export default {
  presets: [shurikenUIPreset],
  // your config
} satisfies Config

Customization

Shuriken UI is fully customizable. You can override components by using the theme option.

export default withShurikenUI({
  theme: {
    extend: {
      shurikenUi: {
        // your customizations
      },
    },
  },
})

note: Documentation is coming soon!