@shuriken-ui/nuxt v3.1.6
Shuriken UI - Nuxt
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 repository contains the Nuxt version (a layer) of Shuriken UI with ready to use components (form inputs, buttons, cards, etc.) that you can use to build your project.
Installation
pnpm install -D @shuriken-ui/nuxt
Note: This also installs the Shuriken UI Tailwind CSS package and required nuxt modules:
Usage
// nuxt.config.ts
export default defineNuxtConfig({
extends: [
'@shuriken-ui/nuxt'
]
})
Note: This is a layer and not a module, so you must extend your nuxt config with it.
Configuration
Nuxt app.config.ts
This is the app configuration for Shuriken UI components
Note: It's not a module configuration, so you must define it in
app.config.ts
, not innuxt.config.ts
.
export default defineAppConfig({
/**
* Shuriken UI layer configuration
*/
nui: {
/**
* Set default properties for BaseButton component
*/
BaseButton: {
variant: 'pastel',
rounded: 'md',
},
// ...
},
})
Tailwind tailwind.config.ts
import { withShurikenUI } from '@shuriken-ui/tailwind'
import colors from 'tailwindcss/colors'
/**
* Shuriken UI tailwind configuration
*/
export default withShurikenUI({
content: [],
theme: {
/**
* Customize fonts
*
* You must load them yourself
* (ex: with unplugin-fonts)
*/
fontFamily: {
sans: ['Roboto Flex', 'sans-serif'],
heading: ['Inter', 'sans-serif'],
alt: ['Karla', 'sans-serif'],
mono: ['ui-monospace', 'monospace'],
},
extend: {
/**
* Customize colors
*
* Use tailwind predefined colors,
* or generate your own with tools like https://tailwindshades.com
*/
colors: {
// Define only the ones you want to override
muted: colors.slate,
primary: colors.violet,
info: colors.sky,
success: colors.teal,
warning: colors.amber,
danger: colors.rose,
},
/**
* Customize Shuriken UI components
*
* @see https://github.com/shuriken-ui/tailwind
*/
nui: {
// ...
}
},
},
})
9 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 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
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
9 months ago
9 months ago
6 months ago
10 months ago
11 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago