Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shuriken-ui/nuxt
Nuxt version of Shuriken UI with ready to use components
https://github.com/shuriken-ui/nuxt
components nuxt nuxt3 ui
Last synced: 15 minutes ago
JSON representation
Nuxt version of Shuriken UI with ready to use components
- Host: GitHub
- URL: https://github.com/shuriken-ui/nuxt
- Owner: shuriken-ui
- License: mit
- Created: 2023-04-13T22:22:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-08T18:56:10.000Z (about 2 months ago)
- Last Synced: 2024-12-20T19:07:35.085Z (7 days ago)
- Topics: components, nuxt, nuxt3, ui
- Language: Vue
- Homepage: https://shurikenui.com/
- Size: 1.69 MB
- Stars: 165
- Watchers: 4
- Forks: 22
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
shurikenui.com |
by cssninja.io
---
## 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](https://nuxt.com/docs/getting-started/layers)) of Shuriken UI with ready to use components (form inputs, buttons, cards, etc.) that you can use to build your project.
## Installation
```bash
pnpm install -D @shuriken-ui/nuxt
```
> **Note**: This also installs the [Shuriken UI Tailwind CSS](https://github.com/shuriken-ui/tailwind) package and required nuxt modules:
>
> - [@nuxtjs/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
> - [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode)
> - [@vueuse/nuxt](https://github.com/vueuse/vueuse/tree/main/packages/nuxt)
> - [nuxt-icon](https://github.com/nuxt-modules/icon)
## Usage
```ts
// nuxt.config.ts
export default defineNuxtConfig({
extends: [
'@shuriken-ui/nuxt'
]
})
```
> **Note**: This is a [layer](https://nuxt.com/docs/getting-started/layers) and not a module, so you must extend your nuxt config with it.
## Configuration
### Nuxt `app.config.ts`
This is the [app configuration](https://nuxt.com/docs/getting-started/configuration#app-configuration) for Shuriken UI components
> **Note**: It's not a module configuration, so you must define it in `app.config.ts`, not in `nuxt.config.ts`.
```ts
export default defineAppConfig({
/**
* Shuriken UI layer configuration
*/
nui: {
/**
* Set default properties for BaseButton component
*/
BaseButton: {
variant: 'pastel',
rounded: 'md',
},
// ...
},
})
```
### Tailwind `tailwind.config.ts`
```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: {
// ...
}
},
},
})
```