@shuriken-ui/tailwind v3.0.4
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 tailwind config
content: [],
})
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 {
// your tailwind config, with the preset
content: [],
presets: [preset],
} satisfies Config
Also, you can import only the components and utils you needs.
// tailwind.config.ts
import type { Config } from 'tailwindcss'
import { fontFamily } from 'tailwindcss/defaultTheme'
import colors from 'tailwindcss/colors'
import { input, button } from '@shuriken-ui/tailwind/plugins'
export default {
// your tailwind config, with only the components you need
plugins: [input, button],
theme: {
fontFamily: {
sans: fontFamily.sans,
heading: fontFamily.sans,
alt: fontFamily.sans,
mono: fontFamily.mono,
},
extend: {
colors: {
primary: colors.violet,
'primary-invert': colors.white,
muted: colors.slate,
info: colors.sky,
success: colors.teal,
warning: colors.amber,
danger: colors.rose,
},
},
},
} satisfies Config
Customization
Shuriken UI is fully customizable. You can override components by using the theme
option.
export default withShurikenUI({
theme: {
extend: {
nui: {
// your customizations
},
},
},
})
note: Documentation is coming soon!
28 days ago
30 days ago
1 month ago
1 month ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
5 months ago
7 months ago
5 months ago
7 months ago
6 months ago
7 months ago
6 months ago
8 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago