Sounds Designed UI

Sounds Designed UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

Documentation

Visit https://ui.soundsdesigned.com to explore the documentation.

Installation

pnpm add @sounds-designed/ui tailwindcss

yarn add @sounds-designed/ui tailwindcss

npm install @sounds-designed/ui tailwindcss

bun add @sounds-designed/ui tailwindcss

Nuxt

1. Add the Sounds Designed UI module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@sounds-designed/ui']
})

2. Import Tailwind CSS and Sounds Designed UI in your CSS:

@import "tailwindcss";
@import "@sounds-designed/ui";

Learn more in the installation guide.

Vue

1. Add the Sounds Designed UI Vite plugin in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@sounds-designed/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

2. Use the Sounds Designed UI Vue plugin in your main.ts:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@sounds-designed/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

3. Import Tailwind CSS and Sounds Designed UI in your CSS:

@import "tailwindcss";
@import "@sounds-designed/ui";

Learn more in the installation guide.

Contribution

Thank you for considering contributing to Sounds Designed UI. Here are a few ways you can get involved:

• Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
• Suggestions: Have any thoughts to enhance Sounds Designed UI? We'd love to hear them! Check out the contribution guide to share your suggestions.

Local Development

Follow the docs to set up your local development environment and contribute.

Credits

• nuxt/nuxt
• nuxt/icon
• nuxt/fonts
• nuxt-modules/color-mode
• unovue/reka-ui
• tailwindlabs/tailwindcss
• vueuse/vueuse

License

Licensed under the MIT license.