├── .gitignore
├── README.md
├── app
    ├── app.config.ts
    ├── app.vue
    ├── components
    │   ├── ColorMode.vue
    │   ├── FormLogin.vue
    │   └── app
    │   │   ├── AppFooter.vue
    │   │   ├── AppHeader.vue
    │   │   └── AppLogo.vue
    ├── layouts
    │   └── default.vue
    └── pages
    │   └── index.vue
├── nuxt.config.ts
├── package.json
├── public
    └── favicon.ico
├── server
    └── tsconfig.json
├── tsconfig.json
└── uno.config.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Una UI Minimal Starter
 2 | 
 3 | Look at the [Una UI documentation](https://unaui.com/) to learn more.
 4 | 
 5 | ## GitHub Template
 6 | 
 7 | [Create a repo from this template on GitHub](https://github.com/una-ui/starter/generate).
 8 | 
 9 | ## Clone to local
10 | 
11 | If you prefer to do it manually
12 | 
13 | ```bash
14 | npx degit una-ui/starter starter
15 | cd starter
16 | ```
17 | 
18 | ## Setup
19 | 
20 | Make sure to install the dependencies:
21 | 
22 | ```bash
23 | # npm
24 | npm install
25 | 
26 | # pnpm
27 | pnpm install
28 | 
29 | # yarn
30 | yarn install
31 | 
32 | # bun
33 | bun install
34 | ```
35 | 
36 | ## Development Server
37 | 
38 | Start the development server on `http://localhost:3000`:
39 | 
40 | ```bash
41 | # npm
42 | npm run dev
43 | 
44 | # pnpm
45 | pnpm run dev
46 | 
47 | # yarn
48 | yarn dev
49 | 
50 | # bun
51 | bun run dev
52 | ```
53 | 
54 | ## Production
55 | 
56 | Build the application for production:
57 | 
58 | ```bash
59 | # npm
60 | npm run build
61 | 
62 | # pnpm
63 | pnpm run build
64 | 
65 | # yarn
66 | yarn build
67 | 
68 | # bun
69 | bun run build
70 | ```
71 | 
72 | Locally preview production build:
73 | 
74 | ```bash
75 | # npm
76 | npm run preview
77 | 
78 | # pnpm
79 | pnpm run preview
80 | 
81 | # yarn
82 | yarn preview
83 | 
84 | # bun
85 | bun run preview
86 | ```
87 | 


--------------------------------------------------------------------------------
/app/app.config.ts:
--------------------------------------------------------------------------------
1 | export default defineAppConfig({
2 |   una: {
3 |     // you can use any color provided by tailwindcss 💛, or you can define your own colors via uno.config.ts
4 |     primary: 'yellow',
5 |     gray: 'stone',
6 |     radius: 0.5
7 |   }
8 | })
9 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <NuxtLoadingIndicator :color="false" class="z-100 bg-primary/80" />
 4 | 
 5 |     <NuxtLayout>
 6 |       <NuxtPage />
 7 |     </NuxtLayout>
 8 |   </div>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/app/components/ColorMode.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const colorMode = useColorMode()
 3 | function toggleDark() {
 4 |   colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
 5 | }
 6 | </script>
 7 | 
 8 | <template>
 9 |   <NButton
10 |     btn="ghost-gray square"
11 |     @click="toggleDark()"
12 |     label="i-radix-icons-moon dark:i-radix-icons-sun"
13 |     icon
14 |   >
15 |   </NButton>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/app/components/FormLogin.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 
 3 | const loading = ref(false)
 4 | 
 5 | const form = ref({
 6 |   email: '',
 7 |   password: '',
 8 | })
 9 | 
10 | function submitForm(){
11 |   loading.value = true
12 | 
13 |   setTimeout(() => {
14 |     loading.value = false
15 |   }, 3000);
16 | }
17 | </script>
18 | 
19 | <template>
20 |   <form
21 |     class="flex flex-col border border-base gap-4 rounded-md p-8"
22 |     @submit.prevent="submitForm()"
23 |   >
24 |     <div
25 |       :class="{ 'n-disabled': loading }"
26 |       class="flex flex-col gap-4"
27 |     >
28 |       <NFormGroup label="Email">
29 |         <NInput v-model="form.email" placeholder="johndoe@email.com" />
30 |       </NFormGroup>
31 | 
32 |       <NFormGroup label="Password">
33 |         <NInput v-model="form.password" type="password" />
34 |       </NFormGroup>
35 |     </div>
36 | 
37 |     <NButton class="mt-4" type="submit" label="Submit" :loading="loading" />
38 |     <NButton v-if="loading" btn="solid-white" label="Cancel" @click="loading = false" />
39 |   </form>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/app/components/app/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="text-center py-6">
 3 |     <NButton 
 4 |       btn="text-muted"
 5 |       target="_blank" 
 6 |       to="https://github.com/phojie"
 7 |     >
 8 |       Copyright © 2023-present Phojie Rengel
 9 |     </NButton>
10 |   </footer>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/app/components/app/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container flex py-6 px-4 justify-between">
 3 |     <h1 class="font-bold text-xl">
 4 |       Una <span class="text-primary">UI</span>
 5 |     </h1>
 6 | 
 7 |     <div class="inline-flex space-x-2">
 8 |       <ColorMode/>
 9 |       <NThemeSwitcher/>
10 |     </div>
11 |   </div>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/app/components/app/AppLogo.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M262 358C262 305.533 304.533 263 357 263H438.744C446.065 263 452 268.935 452 276.256V439.744C452 447.065 446.065 453 438.744 453H357C304.533 453 262 410.467 262 358Z" style="fill: rgb(var(--una-gray-500))" />
4 |     <path d="M262 143C262 90.533 304.533 48 357 48C409.467 48 452 90.533 452 143V224.744C452 232.065 446.065 238 438.744 238H275.256C267.935 238 262 232.065 262 224.744V143Z" style="fill: rgb(var(--una-primary-600))" />
5 |     <path d="M47 278C47 269.716 53.7157 263 62 263H222C230.284 263 237 269.716 237 278V358C237 410.467 194.467 453 142 453C89.533 453 47 410.467 47 358V278Z" style="fill: rgb(var(--una-gray-700))" />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container mx-auto px-4 md:px-6 lg:px-8">
 3 |     <AppHeader/>
 4 | 
 5 |     <main>
 6 |       <slot />
 7 |     </main>
 8 | 
 9 |     <LazyAppFooter/>
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="mx-auto max-w-lg px-4 py-8 lg:px-8 sm:px-6">
 3 |     <div class="mx-auto max-w-xl rounded-md space-y-10">
 4 |       <div class="flex justify-center">
 5 |         <AppLogo class="h-30"/>
 6 |       </div>
 7 | 
 8 |       <div class="text-center space-y-1">
 9 |         <h1 class="text-3xl font-extrabold text-accent">
10 |           Sign in to your account
11 |         </h1>
12 |         <p class="text-sm font-medium text-primary">
13 |           Powered by <NLink to="https://unaui.com" target="_blank">https://unaui.com/</NLink>
14 |         </p>
15 |       </div>
16 | 
17 |       <div class="space-y-4">
18 |         <FormLogin />
19 | 
20 |         <div class="border border-base rounded-md p-4 text-center text-sm">
21 |           No account yet?
22 |           <NLink btn="link square" to="/">
23 |             Create an account here
24 |           </NLink>
25 |         </div>
26 |       </div>
27 |     </div>
28 |   </main>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   modules: [
 4 |     '@una-ui/nuxt',
 5 |   ],
 6 |   compatibilityDate: '2024-11-01',
 7 |   future: {
 8 |     compatibilityVersion: 4
 9 |   },
10 |   devtools: {
11 |     enabled: true,
12 |     componentInspector: false
13 |   },
14 |   // default settings; you can remove this
15 |   una: {
16 |     prefix: 'N',
17 |     themeable: true,
18 |     global: true,
19 |   },
20 |   colorMode: {
21 |     preference: 'dark',
22 |   },
23 | })
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "una-ui-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "devDependencies": {
13 |     "@una-ui/nuxt": "npm:@una-ui/nuxt-edge@latest",
14 |     "nuxt": "^3.16.0",
15 |     "vue": "latest"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/una-ui/starter/75a447df5ec78510754221e305c27951b7fc3ac8/public/favicon.ico


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json",
4 | }
5 | 


--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
 1 | import { defaultConfig } from '@una-ui/nuxt/una.config'
 2 | 
 3 | export default defaultConfig({
 4 |   /**
 5 |    * UnoCSS Configuration Options
 6 |    * 
 7 |    * You can extend the default UnoCSS configuration here by adding rules, 
 8 |    * themes, variants, and other options.
 9 |    * 
10 |    * @see https://unocss.dev/guide/config-file
11 |    * @see https://unocss.dev/config/
12 |   */
13 | 
14 |   /**
15 |    * Una UI Shortcuts Customization
16 |    * 
17 |    * Shortcuts allow you to create reusable utility combinations or override
18 |    * the default Una UI components styling.
19 |    * 
20 |    * Two types of shortcuts:
21 |    * 1. Static: Simple string mappings (object format)
22 |    * 2. Dynamic: RegExp patterns with functions that return styles
23 |    * 
24 |    * @see https://github.com/una-ui/una-ui/tree/main/packages/preset/src/_shortcuts
25 |    * @see https://unocss.dev/config/shortcuts
26 |   */
27 |   shortcuts: [
28 |     /**
29 |      * Static Shortcuts
30 |      * 
31 |      * Use these to create new utility combinations or override existing ones.
32 |      * 
33 |      * @example 
34 |      * 'btn-custom': 'py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600',
35 |      * 'card': 'p-4 border rounded-lg shadow bg-white dark:bg-gray-800'
36 |     */
37 |     {
38 |       // add here ...
39 |     },
40 | 
41 |     /**
42 |      * Dynamic Shortcuts
43 |      * 
44 |      * Create pattern-based utilities with variants using RegExp.
45 |      * 
46 |      * @example
47 |      * [/^gradient-(\w+)$/, ([, color]) => `bg-gradient-to-r from-${color}-500 to-${color}-700`],
48 |      * [/^shadow-(\w+)$/, ([, size]) => size === 'sm' ? 'shadow-sm' : size === 'lg' ? 'shadow-lg' : 'shadow']
49 |     */
50 |   ],
51 | })
52 | 
53 | 


--------------------------------------------------------------------------------