-t github:ZTL-UwU/shadcn-docs-nuxt-starter
- ```
-::
-
-::alert
-Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/Abhishek-Mallick/universal-box-starter).
-::
-
-### Install Dependencies
-
-::code-group
- ```bash [npm]
- npm install
- ```
- ```bash [pnpm]
- pnpm install
- ```
- ```bash [bun]
- bun install
- ```
- ```bash [yarn]
- yarn install
- ```
-::
-
-### Development Server
-
-::code-group
- ```bash [npm]
- npm run dev -- -o
- ```
- ```bash [pnpm]
- pnpm dev -o
- ```
- ```bash [bun]
- bun run dev -o
- ```
- ```bash [yarn]
- yarn dev --open
- ```
-::
-
-::alert{type="success" icon="lucide:circle-check"}
-Well done! A browser window should automatically open for http://localhost:3000.
-::
-
-### Configure shadcn-docs
-
-Pick the theme or adjust other settings to your liking.
-
-:read-more{to="/api/configuration/shadcn-docs"}
-
-::
diff --git a/website/content/1.getting-started/3.writing/1.markdown.md b/website/content/1.getting-started/3.writing/1.markdown.md
deleted file mode 100644
index 712a531..0000000
--- a/website/content/1.getting-started/3.writing/1.markdown.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Markdown
-description: How to write docs with the MDC syntax.
-icon: 'lucide:arrow-big-down'
----
-
-::Alert
----
-to: https://content.nuxt.com/usage/markdown
-target: _blank
----
-Read the detailed MDC usage guide in the **Nuxt Content** Docs.
-::
-
-## Tips
-
-### Hide title from toc
-:badge[0.4.7]{variant="outline"}
-
-Set title `id` to `hide-toc` will hide the header from toc.
-
-```mdc
-:h2[Footnotes]{id="hide-toc"}
-```
diff --git a/website/content/1.getting-started/3.writing/2.components.md b/website/content/1.getting-started/3.writing/2.components.md
deleted file mode 100644
index ba810a9..0000000
--- a/website/content/1.getting-started/3.writing/2.components.md
+++ /dev/null
@@ -1,866 +0,0 @@
----
-title: Components
-description: Components in shadcn-docs-nuxt you can use.
-icon: 'lucide:box'
----
-
-## Docs Components
-
-The **Badges** under each component title marks compatibility with other doc templates.
-
-### Alert
-
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#alert" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::alert{icon="lucide:info"}
- An **default** alert with `code` and a [link](/).
- ::
-
- ::alert{type="info" icon="lucide:info"}
- An **info** alert with `code` and a [link](/).
- ::
-
- ::alert{type="success" icon="lucide:lightbulb"}
- A **success** alert with `code` and a [link](/).
- ::
-
- ::alert{type="warning" icon="lucide:triangle-alert"}
- A **warning** alert with `code` and a [link](/).
- ::
-
- ::alert{type="danger" icon="lucide:circle-x"}
- A **danger** alert with `code` and a [link](/).
- ::
-
- ::alert{title="Title" icon="lucide:layout-list"}
- An alert with a title.
- ::
-
- ::alert{to="https://github.com/Abhishek-Mallick/universal-box" target="_blank" icon="lucide:link"}
- A **link** alert.
- ::
- ::
-
- ```mdc [Code]
- ::alert{icon="lucide:info"}
- An **default** alert with `code` and a [link](/).
- ::
-
- ::alert{type="info" icon="lucide:info"}
- An **info** alert with `code` and a [link](/).
- ::
-
- ::alert{type="success" icon="lucide:lightbulb"}
- A **success** alert with `code` and a [link](/).
- ::
-
- ::alert{type="warning" icon="lucide:triangle-alert"}
- A **warning** alert with `code` and a [link](/).
- ::
-
- ::alert{type="danger" icon="lucide:circle-x"}
- A **danger** alert with `code` and a [link](/).
- ::
-
- ::alert{title="Title" icon="lucide:layout-list"}
- An alert with a title.
- ::
-
- ::alert{to="https://github.com/Abhishek-Mallick/universal-box" target="_blank" icon="lucide:link"}
- A **link** alert.
- ::
- ```
-::
-
-### Callout
-
-:badge[* Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/callout" target="_blank"}
-
-`::callout`{lang="mdc"} is an alias to `::alert`{lang="mdc"}.
-
-### Read More
-
-:badge[undocs]{variant="outline" to="https://undocs.pages.dev/guide/components#read-more" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- :read-more{to="/getting-started/writing/markdown"}
- :read-more{title="Nuxt website" to="https://nuxt.com/"}
- :read-more{to="https://nuxt.com/"}
- ::
-
- ```mdc [Code]
- :read-more{to="/getting-started/writing/markdown"}
- :read-more{title="Nuxt website" to="https://nuxt.com/"}
- :read-more{to="https://nuxt.com/"}
- ```
-::
-
-### Badge
-
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#badge" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::badge
- Default
- ::
- ::badge{type="info"}
- Info
- ::
- :badge[Warning]{type="warning"}
- :badge[Danger]{type="danger"}
- :badge[Outline]{variant="outline"}
- :badge[Secondary]{variant="secondary"}
- ::badge{variant="outline" type="info" to="https://github.com/Abhishek-Mallick/universal-box" target="_blank"}
- Link
- ::
- ::
-
- ```mdc [Code]
- ::badge
- Default
- ::
- ::badge{type="info"}
- Info
- ::
- :badge[Warning]{type="warning"}
- :badge[Danger]{type="danger"}
- :badge[Outline]{variant="outline"}
- :badge[Secondary]{variant="secondary"}
- ::badge{variant="outline" type="info" to="https://github.com/Abhishek-Mallick/universal-box" target="_blank"}
- Link
- ::
- ```
-::
-
-### Code Group
-
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#codegroup" target="_blank"}
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/code-group" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::code-group
- ```bash [npm]
- npm run dev
- ```
-
- ```bash [pnpm]
- pnpm dev
- ```
-
- ```bash [yarn]
- yarn dev
- ```
-
- ```bash [bun]
- bun run dev
- ```
- ::
- ::
-
- ```mdc [Code]
- ::code-group
- ```bash [npm]
- npm run dev
- ```
-
- ```bash [pnpm]
- pnpm dev
- ```
-
- ```bash [yarn]
- yarn dev
- ```
-
- ```bash [bun]
- bun run dev
- ```
- ::
- ```
-::
-
-::alert{to="/getting-started/writing/components#tabs"}
-`::code-group`{lang="mdc"} is a wrapper around `::tabs{variant="card"}`{lang="mdc"}.
-::
-
-### Card
-
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#card" target="_blank"}
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/card" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::card
- #title
- Card with slots
-
- #description
- Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-
- #content
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
-
- #footer
- `Card Footer`
- ::
-
- ::card
- ---
- title: Card with props
- description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
- footer: Card Footer
- icon: 'lucide:box'
- ---
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
- ::
-
- ::card
- ---
- to: https://github.com/Abhishek-Mallick/universal-box
- target: _blank
- ---
- #title
- Card with link
-
- #content
- Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
- ::
- ::
-
- ```mdc [Code]
- ::card
- #title
- Card with slots
-
- #description
- Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-
- #content
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
-
- #footer
- `Card Footer`
- ::
-
- ::card
- ---
- title: Card with props
- description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
- footer: Card Footer
- icon: 'lucide:box'
- ---
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
- ::
-
- ::card
- ---
- to: https://github.com/Abhishek-Mallick/universal-box
- target: _blank
- ---
- #title
- Card with link
-
- #content
- Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
- ::
- ```
-::
-
-### Card Group
-
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/card-group" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::card-group
- ::card
- ---
- title: Components
- icon: i-heroicons-cube
- to: https://nuxt.com/docs/api/components/client-only
- target: _blank
- ---
- Explore Nuxt built-in components for pages, layouts, head, and more.
- ::
- ::card
- ---
- title: Composables
- icon: i-heroicons-arrows-right-left
- to: https://nuxt.com/docs/api/composables/use-app-config
- target: _blank
- ---
- Discover Nuxt composable functions for data-fetching, head management and more.
- ::
- ::card
- ---
- title: Utils
- icon: i-heroicons-scissors
- to: https://nuxt.com/docs/api/utils/dollarfetch
- target: _blank
- ---
- Learn about Nuxt utility functions for navigation, error handling and more.
- ::
- ::card
- ---
- title: Commands
- icon: i-heroicons-command-line
- to: https://nuxt.com/docs/api/commands/add
- target: _blank
- ---
- List of Nuxt CLI commands to init, analyze, build, and preview your application.
- ::
- ::
- ::
- ```mdc [Code]
- ::card-group
- ::card
- ---
- title: Components
- icon: i-heroicons-cube
- to: https://nuxt.com/docs/api/components/client-only
- target: _blank
- ---
- Explore Nuxt built-in components for pages, layouts, head, and more.
- ::
- ::card
- ---
- title: Composables
- icon: i-heroicons-arrows-right-left
- to: https://nuxt.com/docs/api/composables/use-app-config
- target: _blank
- ---
- Discover Nuxt composable functions for data-fetching, head management and more.
- ::
- ::card
- ---
- title: Utils
- icon: i-heroicons-scissors
- to: https://nuxt.com/docs/api/utils/dollarfetch
- target: _blank
- ---
- Learn about Nuxt utility functions for navigation, error handling and more.
- ::
- ::card
- ---
- title: Commands
- icon: i-heroicons-command-line
- to: https://nuxt.com/docs/api/commands/add
- target: _blank
- ---
- List of Nuxt CLI commands to init, analyze, build, and preview your application.
- ::
- ::
- ```
-::
-
-### Icon
-
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#icon" target="_blank"}
-
-::alert{to="https://github.com/nuxt-modules/icon" target="_blank"}
-The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
-::
-
-::code-group
- ::div{label="Preview" class="p-4"}
-
-
- :icon{name="lucide:box"}
- :icon{name="logos:javascript"}
- :icon{name="logos:vue"}
- :icon{name="logos:nuxt-icon" size="30"}
-
-
- ::
-
- ```mdc [Code]
- :icon{name="lucide:box"}
- :icon{name="logos:javascript"}
- :icon{name="logos:vue"}
- :icon{name="logos:nuxt-icon" size="30"}
- ```
-::
-
-If you want to use other icons, it is highly recommended to install them locally, which is faster and more reliable on both SSR and client-side.
-
-```bash[Terminal]
-npm i -D @iconify-json/collection-name
-```
-
-`@iconify-json/lucide` is installed by default.
-
-### Steps
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::steps
- ### Get Starter Template
-
- ::code-group
- ```bash [npm]
- npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
- ```
- ```bash [pnpm]
- pnpm dlx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
- ```
- ```bash [bun]
- bunx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
- ```
- ::
-
- ::alert
- Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/Abhishek-Mallick/universal-box-starter).
- ::
-
- ### Install Dependencies
-
- ::code-group
- ```bash [npm]
- npm install
- ```
- ```bash [pnpm]
- pnpm install
- ```
- ```bash [bun]
- bun install
- ```
- ::
-
- ### Development Server
-
- ::code-group
- ```bash [npm]
- npm run dev -- -o
- ```
- ```bash [pnpm]
- pnpm dev -o
- ```
- ```bash [bun]
- bun run dev -o
- ```
- ::
- ::
- ::
- ```mdc [Code]
- ::steps
- ### Get Starter Template
-
- ::code-group
- ```bash [npm]
- npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
- ```
- ```bash [pnpm]
- pnpm dlx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
- ```
- ```bash [bun]
- bunx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
- ```
- ::
-
- ::alert
- Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/Abhishek-Mallick/universal-box-starter).
- ::
-
- ### Install Dependencies
-
- ::code-group
- ```bash [npm]
- npm install
- ```
- ```bash [pnpm]
- pnpm install
- ```
- ```bash [bun]
- bun install
- ```
- ::
-
- ### Development Server
-
- ::code-group
- ```bash [npm]
- npm run dev -- -o
- ```
- ```bash [pnpm]
- pnpm dev -o
- ```
- ```bash [bun]
- bun run dev -o
- ```
- ::
- ::
- ```
-::
-
-#### Multi-level headings
-:badge[0.4.6]{variant="outline"}
-::code-group
- ::div{label="Preview" class="p-4"}
- ::steps{level=5}
- ##### Specify the level of headings to use
-
- ```mdc
- ::steps{level=5}
- ```
-
- ##### Available Headings
-
- `h1` through `h6`. Defaults to `h3`.
- ::
- ::
- ```mdc[Code]
- ::steps{level=5}
- ##### Multi-level headings
-
- ```mdc
- ::steps{level=5}
- ```
-
- ##### Available Headings
-
- `h1` through `h6`. Defaults to `h3`.
- ::
- ```
-::
-
-### Field
-
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/field" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::field{name="Field" type="string" defaultValue="undefined" required}
- The _description_ can be set as prop or in the default slot with full **markdown** support.
- ::
- ::
- ```mdc [Code]
- ::field{name="Field" type="string" defaultValue="undefined" required}
- The _description_ can be set as prop or in the default slot with full **markdown** support.
- ::
- ```
-::
-
-The text `required` is configurable in [`main.fieldRequiredText`](/api/configuration/shadcn-docs#main).
-
-### Field Group
-
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/field-group" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::field-group
- ::field{name="withDefault" type="boolean" defaultValue="true"}
- A field with a default value.
- ::
- ::field{name="requiredField" type="boolean" required}
- A required field.
- ::
- ::field{name="clear (path?: string)" type="void"}
- Clears form errors associated with a specific path. If no path is provided, clears all form errors.
- ::
- ::field{name="getErrors (path?: string)" type="FormError[]"}
- Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
- ::
- ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
- Sets form errors for a given path. If no path is provided, overrides all errors.
- ::
- ::field{name="errors" type="Ref"}
- A reference to the array containing validation errors. Use this to access or manipulate the error information.
- ::
- ::
- ::
-
- ```mdc [Code]
- ::field-group
- ::field{name="withDefault" type="boolean" defaultValue="true"}
- A field with a default value.
- ::
- ::field{name="requiredField" type="boolean" required}
- A required field.
- ::
- ::field{name="clear (path?: string)" type="void"}
- Clears form errors associated with a specific path. If no path is provided, clears all form errors.
- ::
- ::field{name="getErrors (path?: string)" type="FormError[]"}
- Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
- ::
- ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
- Sets form errors for a given path. If no path is provided, overrides all errors.
- ::
- ::field{name="errors" type="Ref"}
- A reference to the array containing validation errors. Use this to access or manipulate the error information.
- ::
- ::
- ```
-::
-
-### Tabs
-
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/tabs" target="_blank"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::tabs
- ::div{label="PostgreSQL" icon="lucide:database"}
- ### PostgreSQL column types
-
- ```ts
- import { integer, pgTable } from 'drizzle-orm/pg-core';
-
- export const table = pgTable('table', {
- int: integer('int')
- });
- ```
- ::
- ::div{label="MySQL"}
- ### MySQL column types
-
- ```ts
- import { int, mysqlTable } from 'drizzle-orm/mysql-core';
-
- const table = mysqlTable('table', {
- int: int('int')
- });
- ```
- ::
- ::div{label="SQLite"}
- ### SQLite column types
-
- ```ts
- import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
-
- const table = sqliteTable('table', {
- id: integer('id')
- });
-
- // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
- integer('id', { mode: 'number' });
- integer('id', { mode: 'boolean' });
- integer('id', { mode: 'timestamp_ms' });
- integer('id', { mode: 'timestamp' }); // Date
- ```
- ::
- ::
- ::tabs{variant="card"}
- ::div{label="Card Tab"}
- ### This is a card-style tab
- ::
- ::div{label="Tab 2" icon="lucide:atom"}
- This is Tab #2
- ::
- ```ts [Code Tab]
- console.log('Hello World!');
- ```
- ::
- ::
- ```mdc [Code]
- ::tabs
- ::div{label="PostgreSQL" icon="lucide:database"}
- ### PostgreSQL column types
-
- ```ts
- import { integer, pgTable } from 'drizzle-orm/pg-core';
-
- export const table = pgTable('table', {
- int: integer('int')
- });
- ```
- ::
- ::div{label="MySQL"}
- ### MySQL column types
-
- ```ts
- import { int, mysqlTable } from 'drizzle-orm/mysql-core';
-
- const table = mysqlTable('table', {
- int: int('int')
- });
- ```
- ::
- ::div{label="SQLite"}
- ### SQLite column types
-
- ```ts
- import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
-
- const table = sqliteTable('table', {
- id: integer('id')
- });
-
- // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
- integer('id', { mode: 'number' });
- integer('id', { mode: 'boolean' });
- integer('id', { mode: 'timestamp_ms' });
- integer('id', { mode: 'timestamp' }); // Date
- ```
- ::
- ::
- ::tabs{variant="card"}
- ::div{label="Card Tab"}
- ### This is a card-style tab
- ::
- ::div{label="Tab 2" icon="lucide:atom"}
- This is Tab #2
- ::
- ```ts [Code Tab]
- console.log('Hello World!');
- ```
- ::
- ```
-::
-
-## Page Components
-
-### Hero
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::hero
- ---
- announcement:
- title: 'Release v1.0.0'
- icon: 'noto:party-popper'
- to: /getting-started
- actions:
- - name: Get Started
- to: /getting-started
- - name: GitHub
- variant: outline
- to: https://github.com/Abhishek-Mallick/universal-box
- leftIcon: 'lucide:github'
- ---
-
- #title
- Effortless and Beautiful :br Docs Template.
-
- #description
- Beautifully designed Nuxt Content template with shadcn-vue. :br Customizable. Compatible. Open Source.
- ::
- ::
- ```mdc[Code]
- ::hero
- ---
- announcement:
- title: 'Release v1.0.0'
- icon: 'noto:party-popper'
- to: /getting-started
- actions:
- - name: Get Started
- to: /getting-started
- - name: GitHub
- variant: outline
- to: https://github.com/Abhishek-Mallick/universal-box
- leftIcon: 'lucide:github'
- ---
-
- #title
- Effortless and Beautiful :br Docs Template.
-
- #description
- Beautifully designed Nuxt Content template with shadcn-vue. :br Customizable. Compatible. Open Source.
- ::
- ```
-::
-
-### HeroAlt
-
-:badge[0.4.0]{variant="outline"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::hero-alt
- ---
- announcement:
- title: 'Introducing Charts'
- icon: 'lucide:pie-chart'
- to: /getting-started
- actions:
- - name: Get Started
- to: /getting-started
- - name: GitHub
- variant: ghost
- to: https://github.com/Abhishek-Mallick/universal-box
- ---
-
- #title
- Build your component library
-
- #description
- Beautifully designed components that you can copy and paste into your apps.
- ::
- ::
- ```mdc[Code]
- ::hero-alt
- ---
- announcement:
- title: 'Introducing Charts'
- icon: 'lucide:pie-chart'
- to: /getting-started
- actions:
- - name: Get Started
- to: /getting-started
- - name: GitHub
- variant: outline
- to: https://github.com/Abhishek-Mallick/universal-box
- leftIcon: 'lucide:github'
- ---
-
- #title
- Build your component library
-
- #description
- Beautifully designed components that you can copy and paste into your apps.
- ::
- ```
-::
-
-### Accordion
-
-:badge[0.5.0]{variant="outline"}
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ::accordion{default-value="first-item" collapsible}
- ::accordion-item{value="first-item"}
- #title
- Is it accessible?
-
- #content
- Yes. It adheres to the WAI-ARIA design pattern.
- ::
- ::accordion-item
- #title
- Is it unstyled?
-
- #content
- Yes. It's unstyled by default, giving you freedom over the look and feel.
- ::
- :accordion-item{title="Can it be animated?" content="Yes! You can use the transition prop to configure the animation."}
- ::
- ::
- ```mdc[Code]
- ::accordion{default-value="first-item" collapsible}
- ::accordion-item{value="first-item"}
- #title
- Is it accessible?
-
- #content
- Yes. It adheres to the WAI-ARIA design pattern.
- ::
- ::accordion-item
- #title
- Is it unstyled?
-
- #content
- Yes. It's unstyled by default, giving you freedom over the look and feel.
- ::
- :accordion-item{title="Can it be animated?" content="Yes! You can use the transition prop to configure the animation."}
- ::
- ```
-::
-
-The `value` prop in `::accordion-item`{lang="mdc"} is auto-generated by default. You can set them to other _unique_ values and put them in the `default-value` prop of `::accordion`{lang="mdc"}.
diff --git a/website/content/1.getting-started/3.writing/3.prose.md b/website/content/1.getting-started/3.writing/3.prose.md
deleted file mode 100644
index a4f779a..0000000
--- a/website/content/1.getting-started/3.writing/3.prose.md
+++ /dev/null
@@ -1,319 +0,0 @@
----
-title: Prose Components
-description: A showcase of all shadcn-docs prose components.
-icon: lucide:text
----
-
-### Heading
-
-::code-group
- ::div{label="Preview" class="p-4"}
- # Heading 1
- ## Heading 2
- ### Heading 3
- #### Heading 4
- ##### Heading 5
- ###### Heading 6
- ::
-
- ```md [Code]
- # Heading 1
- ## Heading 2
- ### Heading 3
- #### Heading 4
- ##### Heading 5
- ###### Heading 6
- ```
-::
-
-### Link
-
-::code-group
- ::div{label="Preview" class="p-4"}
- [Link](/getting-started/introduction)
- ::
-
- ```md [Code]
- [Link](/getting-started/introduction)
- ```
-::
-
-### Blockquote
-
-::code-group
- ::div{label="Preview" class="p-4"}
- > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- ::
-
- ```md [Code]
- > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- ```
-::
-
-### Code Block
-
-::code-group
- ::div{label="Preview" class="p-4"}
- ```ts
- export default () => {
- console.log('Code block');
- };
- ```
-
- ```ts [With Title]
- export default () => {
- console.log('Code block');
- };
- ```
-
- ```ts{2} [Highlight Lines]
- export default () => {
- console.log('Code block');
- };
- ```
- ::
-
- ````md [Code]
- ```ts
- export default () => {
- console.log('Code block');
- };
- ```
-
- ```ts [With Title]
- export default () => {
- console.log('Code block');
- };
- ```
-
- ```ts{2} [Highlight Lines]
- export default () => {
- console.log('Code block');
- };
- ```
- ````
-::
-
-### Inline Code
-
-::code-group
- ::div{label="Preview" class="p-4"}
- `code inline`
-
- `const codeInline: string = 'highlighted code inline'`{lang="ts"}
- ::
-
- ```md [Code]
- `code inline`
-
- `const codeInline: string = 'highlighted code inline'`{lang="ts"}
- ```
-::
-
-### Horizontal Rule
-
-::code-group
- ::div{label="Preview" class="p-4"}
- Before
-
- ---
-
- After
- ::
-
- ```md [Code]
- Before
-
- ---
-
- After
- ```
-::
-
-### Image
-
-::code-group
- ::div{label="Preview" class="p-4"}
- 
- ::
-
- ```md [Code]
- 
- ```
-::
-
-### Unordered List
-
-::code-group
- ::div{label="Preview" class="p-4"}
- - Foo
- - Bar
- - Baz
- ::
-
- ```md [Code]
- - Foo
- - Bar
- - Baz
- ```
-::
-
-### Ordered List
-
-::code-group
- ::div{label="Preview" class="p-4"}
- 1. Foo
- 2. Bar
- 3. Baz
- ::
-
- ```md [Code]
- 1. Foo
- 2. Bar
- 3. Baz
- ```
-::
-
-### Paragraph
-
-::code-group
- ::div{label="Preview" class="p-4"}
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- ::
-
- ```md [Code]
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- ```
-::
-
-### Strong
-
-::code-group
- ::div{label="Preview" class="p-4"}
- **Just a strong paragraph.**
- ::
-
- ```md [Code]
- **Just a strong paragraph.**
- ```
-::
-
-### Italic
-
-::code-group
- ::div{label="Preview" class="p-4"}
- _Just an italic paragraph._
- ::
-
- ```md [Code]
- _Just an italic paragraph._
- ```
-::
-
-### Table
-
-::code-group
- ::div{label="Preview" class="p-4"}
- | Key | Type | Description |
- | --- | --------- | ------------------------------------------- |
- | 1 | Wonderful | Table with `some long code snippet example` |
- | 2 | Wonderful | Data |
- | 3 | Wonderful | Website |
- ::
-
- ```md [Code]
- | Key | Type | Description |
- | --- | --------- | ------------------------------------------- |
- | 1 | Wonderful | Table with `some long code snippet example` |
- | 2 | Wonderful | Data |
- | 3 | Wonderful | Website |
- ```
-::
-
-### Overview
-
-::code-group
- ::div{label="Preview" class="p-6"}
- # The Joke Tax Chronicles
-
- Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
-
- ## The King's Plan
-
- The king thought long and hard, and finally came up with [a brilliant plan](#): he would tax the jokes in the kingdom.
-
- > "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
-
- ### The Joke Tax
-
- The king's subjects were not amused. They grumbled and complained, but the king was firm:
-
- - 1st level of puns: 5 gold coins
- - 2nd level of jokes: 10 gold coins
- - 3rd level of one-liners : 20 gold coins
-
- As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.
-
- ### Jokester's Revolt
-
- Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
-
- And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.
-
- ### The People's Rebellion
-
- The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.
-
- | King's Treasury | People's happiness |
- | :-------------- | :----------------- |
- | Empty | Overflowing |
- | Modest | Satisfied |
- | Full | Ecstatic |
-
- The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.
-
- The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
- ::
-
- ```md [Code]
- # The Joke Tax Chronicles
-
- Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
-
- ## The King's Plan
-
- The king thought long and hard, and finally came up with [a brilliant plan](#): he would tax the jokes in the kingdom.
-
- > "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
-
- ### The Joke Tax
-
- The king's subjects were not amused. They grumbled and complained, but the king was firm:
-
- - 1st level of puns: 5 gold coins
- - 2nd level of jokes: 10 gold coins
- - 3rd level of one-liners : 20 gold coins
-
- As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.
-
- ### Jokester's Revolt
-
- Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
-
- And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.
-
- ### The People's Rebellion
-
- The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.
-
- | King's Treasury | People's happiness |
- | :-------------- | :----------------- |
- | Empty | Overflowing |
- | Modest | Satisfied |
- | Full | Ecstatic |
-
- The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.
-
- The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
- ```
-::
diff --git a/website/content/1.getting-started/3.writing/_dir.yml b/website/content/1.getting-started/3.writing/_dir.yml
deleted file mode 100644
index e28c46d..0000000
--- a/website/content/1.getting-started/3.writing/_dir.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-title: Writing
-icon: lucide:edit
-navigation.redirect: /getting-started/writing/markdown
diff --git a/website/content/2.api/1.configuration/1.shadcn-docs.md b/website/content/2.api/1.configuration/1.shadcn-docs.md
deleted file mode 100644
index 43f5e34..0000000
--- a/website/content/2.api/1.configuration/1.shadcn-docs.md
+++ /dev/null
@@ -1,292 +0,0 @@
----
-title: shadcn-docs
-description: Customizing shadcn-docs-nuxt.
-icon: simple-icons:shadcnui
----
-
-shadcn-docs-nuxt is configured through `app.config.ts`.
-
-```ts [app.config.ts]
-export default defineAppConfig({
- shadcnDocs: {
- header: {
- xxx
- },
- aside: {
- xxx
- },
- main: {
- xxx
- },
- xxx
- },
-});
-```
-
-## Fields Reference
-
-Illustrative type declarations:
-
-```ts
-interface ILink {
- title?: string;
- icon?: string;
- to: string;
- target?: string;
-}
-
-interface INav {
- title: string;
- links?: (ILink & { description: string })[];
- to?: string;
- target?: string;
-}
-```
-
-## `site`
-
-::field-group
- ::field{name="name" type="string"}
- The site name shown on the tap title: ` - `.
- ::
- ::field{name="description" type="string"}
- The site description for SEO.
- ::
- ::field{name="ogImage" type="string"}
- The path to the Open Graph image.
- ::
-::
-
-## `theme`
-
-::field-group
- ::field{name="customizable" type="boolean" defaultValue="true"}
- Whether the theme can be customized by the user (show the customize button in the header).
- ::
- ::field{name="color" type="Color" defaultValue="zinc"}
- The default color theme. https://www.shadcn-vue.com/themes.html
- ::
- ::field{name="radius" type="string" defaultValue="0.5"}
- The default radius.
- ::
-::
-
-## `header`
-
-::field-group
- ::field{name="showLoadingIndicator" type="boolean" defaultValue="true"}
- Whether to show the nuxt loading indicator.
- ::
- ::field{name="title" type="string"}
- The title shown on the header next to the icon.
- ::
- ::field{name="showTitle" type="boolean" defaultValue="true"}
- Whether to show the title text on the header.
- ::
- ::field{name="border" type="boolean" defaultValue="false"}
- Whether to show the bottom border of the header.
- ::
- ::field{name="darkModeToggle" type="boolean" defaultValue="true"}
- Whether to show the dark mode toggle.
- ::
- ::field{name="logo" type="{ light: string; dark: string; }" defaultValue="{ light: '/logo.svg', dark: '/logo-dark.svg' }"}
- The path to the logo image files in `/public`. `light` is for the icon shown in light mode, `dark` is for the icon shown in dark mode.
- ::
- ::field{name="showTitleInMobile" type="boolean" defaultValue="false"}
- Whether to show the logo and title in mobile. (Recommended to use with [button styled search bar](/api/configuration#search))
- ::
- ::field{name="nav" type="INav[]" defaultValue="[]"}
- The content of the navbar in the header.
- ::
- ::field{name="links" type="ILink[]" defaultValue="[]"}
- The links on the right of the header.
- ::
-::
-
-## `aside`
-
-::field-group
- ::field{name="useLevel" type="boolean" defaultValue="true"}
- Whether to use level-styled sidebar.
- ::
- ::field{name="collapse" type="boolean" defaultValue="false"}
- Whether to collapse all collapsible by default.
- ::
-::
-
-## `main`
-
-::field-group
- ::field{name="padded" type="boolean" defaultValue="true"}
- Whether the page is padded.
- ::
- ::field{name="breadCrumb" type="boolean" defaultValue="true"}
- Whether to show the bread crumb.
- ::
- ::field{name="showTitle" type="boolean" defaultValue="true"}
- Whether to show the title section.
- ::
- ::field{name="codeCopyToast" type="boolean" defaultValue="true"}
- Whether to show a toast on code copy.
- ::
- ::field{name="codeCopyToastText" type="string" defaultValue="'Copied to clipboard!"}
- The text shown in the toaster.
- ::
- ::field{name="fieldRequiredText" type="string" defaultValue="'required'"}
- The text shown in the [field](/getting-started/writing/components#field) component when a field is required.
- ::
- ::field{name="codeIcon" type="Record"}
- The icon mapping for language / filename in the [code group](/getting-started/writing/components#code-group) header.
- ::
-::
-
-## `footer`
-
-::field-group
- ::field{name="credits" type="string" defaultValue="''"}
- The credit text on the left side of the footer.
- ::
- ::field{name="links" type="ILink[]" defaultValue="[]"}
- The links on the right side of the footer.
- ::
-::
-
-## `toc`
-
-::field-group
- ::field{name="enable" type="boolean" defaultValue="true"}
- Whether to turn on the toc section.
- ::
- ::field{name="enableInMobile" type="boolean" defaultValue="false"}
- Whether to turn on the toc section in mobile.
- ::
- ::field{name="title" type="string" defaultValue="'On This Page'"}
- The title for the toc section.
- ::
- ::field{name="links" type="ILink[]" defaultValue="[]"}
- The links under the toc section.
- ::
-::
-
-## `search`
-
-::field-group
- ::field{name="enable" type="boolean" defaultValue="true"}
- Whether to turn on the search feature.
- ::
- ::field{name="inAside" type="boolean" defaultValue="false"}
- Whether to show the search bar in the sidebar.
- ::
- ::field{name="style" type="'input' | 'button'" defaultValue="input"}
- Whether the search bar is displayed as a input or a button.
- ::
- ::field{name="placeholder" type="string" defaultValue="'Search...'"}
- The placeholder text shown in the search bar.
- ::
- ::field{name="placeholderDetailed" type="string" defaultValue="'Search documentation...'"}
- The placeholder text shown in the search dialog input.
- ::
-::
-
-## Default Config
-
-```ts [composables/useConfig.ts]
-const defaultConfig: DefaultConfig = {
- site: {
- name: 'shadcn-docs',
- description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
- ogImage: '/hero.png',
- },
- theme: {
- customizable: true,
- color: 'zinc',
- radius: 0.5,
- },
- header: {
- showLoadingIndicator: true,
- title: 'shadcn-docs',
- showTitle: true,
- logo: {
- light: '/logo.svg',
- dark: '/logo-dark.svg',
- },
- showTitleInMobile: false,
- border: false,
- darkModeToggle: true,
- nav: [],
- links: [],
- },
- aside: {
- useLevel: true,
- collapse: false,
- },
- main: {
- breadCrumb: true,
- showTitle: true,
- codeCopyToast: true,
- codeCopyToastText: 'Copied to clipboard!',
- fieldRequiredText: 'required',
- padded: true,
- codeIcon: {
- 'package.json': 'vscode-icons:file-type-node',
- 'tsconfig.json': 'vscode-icons:file-type-tsconfig',
- '.npmrc': 'vscode-icons:file-type-npm',
- '.editorconfig': 'vscode-icons:file-type-editorconfig',
- '.eslintrc': 'vscode-icons:file-type-eslint',
- '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
- '.eslintignore': 'vscode-icons:file-type-eslint',
- 'eslint.config.js': 'vscode-icons:file-type-eslint',
- 'eslint.config.mjs': 'vscode-icons:file-type-eslint',
- 'eslint.config.cjs': 'vscode-icons:file-type-eslint',
- '.gitignore': 'vscode-icons:file-type-git',
- 'yarn.lock': 'vscode-icons:file-type-yarn',
- '.env': 'vscode-icons:file-type-dotenv',
- '.env.example': 'vscode-icons:file-type-dotenv',
- '.vscode/settings.json': 'vscode-icons:file-type-vscode',
- 'nuxt': 'vscode-icons:file-type-nuxt',
- '.nuxtrc': 'vscode-icons:file-type-nuxt',
- '.nuxtignore': 'vscode-icons:file-type-nuxt',
- 'nuxt.config.js': 'vscode-icons:file-type-nuxt',
- 'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
- 'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
- 'tailwind.config.js': 'vscode-icons:file-type-tailwind',
- 'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
- 'vue': 'vscode-icons:file-type-vue',
- 'ts': 'vscode-icons:file-type-typescript',
- 'tsx': 'vscode-icons:file-type-typescript',
- 'mjs': 'vscode-icons:file-type-js',
- 'cjs': 'vscode-icons:file-type-js',
- 'js': 'vscode-icons:file-type-js',
- 'jsx': 'vscode-icons:file-type-js',
- 'md': 'vscode-icons:file-type-markdown',
- 'mdc': 'vscode-icons:file-type-markdown',
- 'py': 'vscode-icons:file-type-python',
- 'npm': 'vscode-icons:file-type-npm',
- 'pnpm': 'vscode-icons:file-type-pnpm',
- 'npx': 'vscode-icons:file-type-npm',
- 'yarn': 'vscode-icons:file-type-yarn',
- 'bun': 'vscode-icons:file-type-bun',
- 'yml': 'vscode-icons:file-type-yaml',
- 'json': 'vscode-icons:file-type-json',
- 'terminal': 'lucide:terminal',
- },
- },
- footer: {
- credits: '',
- links: [],
- },
- toc: {
- enable: true,
- enableInMobile: false,
- title: 'On This Page',
- links: [],
- },
- search: {
- enable: true,
- inAside: false,
- style: 'input',
- placeholder: 'Search...',
- placeholderDetailed: 'Search documentation...',
- },
-};
-```
diff --git a/website/content/2.api/1.configuration/2.nuxt-content.md b/website/content/2.api/1.configuration/2.nuxt-content.md
deleted file mode 100644
index 409ca24..0000000
--- a/website/content/2.api/1.configuration/2.nuxt-content.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Nuxt Content
-description: Configuring the Nuxt Content module.
-icon: lucide:book
----
-
-::Alert
----
-to: https://content.nuxt.com/get-started/configuration
-target: _blank
----
-Read the detailed configuration guide in **Nuxt Content** Docs.
-::
-
-The default nuxt content config can be overridden in `nuxt.config.ts`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
- devtools: { enabled: true },
- extends: ['shadcn-docs-nuxt'],
-
- // Here
- content: {
- xxx
- },
-
- compatibilityDate: '2024-07-06',
-});
-```
-
-## Syntax Highlighting
-
-### Theme
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
- content: {
- highlight: {
- theme: {
- // Default theme
- default: 'github-light',
- // Theme used in dark-mode
- dark: 'github-dark',
- }
- }
- }
-});
-```
-
-:read-more{to="https://shiki.style/themes"}
-
-### Languages
-
-The default highlighted languages are: `['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini']`{lang="js"}.
-
-If you need to highlight other languages, add them in your `nuxt.config.ts`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
- content: {
- highlight: {
- langs: ['c', 'cpp'],
- },
- },
-});
-```
-
-:read-more{to="https://shiki.style/languages"}
-
-## Default Config
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
- content: {
- documentDriven: true,
- highlight: {
- theme: {
- default: 'github-light',
- dark: 'github-dark',
- },
- preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'],
- },
- navigation: {
- fields: ['icon'],
- },
- experimental: {
- search: {
- indexed: true,
- },
- },
- },
-});
-```
diff --git a/website/content/2.api/1.configuration/_dir.yml b/website/content/2.api/1.configuration/_dir.yml
deleted file mode 100644
index d0423e8..0000000
--- a/website/content/2.api/1.configuration/_dir.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-title: Configuration
-icon: lucide:settings
-navigation.redirect: /api/configuration/shadcn-docs
diff --git a/website/content/2.api/2.themes.md b/website/content/2.api/2.themes.md
deleted file mode 100644
index 63b0e63..0000000
--- a/website/content/2.api/2.themes.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Themes
-icon: 'lucide:palette'
-description: Add colors. Make it yours.
----
-
-::Alert{to="/api/configuration#theme"}
-See how to customize the theme in **Configuration**.
-::
diff --git a/website/content/2.api/3.composables.md b/website/content/2.api/3.composables.md
deleted file mode 100644
index 75b8b7a..0000000
--- a/website/content/2.api/3.composables.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Composables
-description: Composable functions exported by shadcn-docs-nuxt.
-icon: 'lucide:square-function'
----
-
-### `useConfig()`
-
-Get the config from `app.config.ts`.
-
-- `main`, `header`, `aside`, `footer` and `toc` can be set from `_dir.yml` and any `page.md` file.
-
-```ts
-const {
- site,
- search,
- header,
- main,
- aside,
- footer,
- toc,
-} = useConfig();
-```
-
-### `useScrollspy()`
-
-Modified from [docus](https://github.com/nuxt-themes/docus/blob/main/composables/useScrollspy.ts). `useScrollspy()` is used in docs layout to make the ToC display the currently visible headings.
-
-```ts
-const {
- // Headings on the page
- visibleHeadings,
- // Active headings (for the current page)
- activeHeadings,
- // Update headings (an array of DOM nodes)
- updateHeadings
-} = useScrollspy();
-```
diff --git a/website/content/2.api/_dir.yml b/website/content/2.api/_dir.yml
deleted file mode 100644
index 6fbedd1..0000000
--- a/website/content/2.api/_dir.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-title: API
-icon: lucide:book-open
-navigation.redirect: /api/configuration
diff --git a/website/content/Templates/0.index.md b/website/content/Templates/0.index.md
index d1975e2..844061f 100644
--- a/website/content/Templates/0.index.md
+++ b/website/content/Templates/0.index.md
@@ -1,9 +1,7 @@
---
-title: Home
+title: Templates
navigation: false
layout: page
-main:
- fluid: false
---
+## Motivation
+
+**Universal-Box** was created to simplify the project setup process by providing users with a diverse collection of pre-built templates. Our goal is to enable developers to quickly configure their projects and deploy them with just one click. Whether you're launching a new web application, API service, or any other type of project, Universal-Box is designed to save you hours of initial setup time.
+
+With [Universal-Box](https://github.com/Abhishek-Mallick/universal-box), you can focus on what truly matters—building your application—while we handle the boilerplate setup. Enjoy seamless integration and customization options that adapt to your specific needs, ensuring a smooth development experience from start to finish.
+
+## Features
+
+- **50+ Project templates** available for free.
+- **Easy and fast installation** process - Quickly scaffold new projects with minimal setup time using intuitive command-line instructions.
+- Each template includes a comprehensive `README` with documentation that provides step-by-step guidance on setup, customization, and usage.
+- Fully customizable to meet your specific needs.
+- **One-Click Deployments**: Simplify your workflow with one-click deployment options that allow you to launch your applications effortlessly.`(to be released)`
+- Follows **industry standards** for best practices.
+- All dependencies are kept up to date. Regularly updated templates ensure compatibility with the latest libraries and frameworks. Templates are updated **every week** to ensure relevance.
+
+## Discover Your Perfect Template
+
+::steps
+Choosing the right template is crucial for kickstarting your project effectively. Here's how to find and set up the perfect template for your needs:
+
+### Browse Available Templates
+
+Start by exploring the collection of templates available at [Universal Box Templates](https://universal-box.dev/templates). Here, you can find a variety of options tailored for different types of projects, including web applications, APIs, and more. Each template comes with a description to help you understand its purpose and features.
+
+### Select Your Template
+
+Once you've browsed through the templates, select one that aligns with your project requirements. Consider factors such as:
+- **Project Type**: Are you building a web app, an API, or something else?
+- **Customization Needs**: Does the template offer the flexibility you require?
+
+### Initiate Your Template Setup
+
+After selecting your template, use the following commands to initialize your project:
+
+::steps
+::
+::code-group
+ ```bash [npm]
+ # Install Universal Box globally
+ npm i -g universal-box
+
+ # Initialize your project
+ universal-box init
+ ```
+::
+
+::alert
+Alternatively, you can have a look at the codebase [here](https://github.com/Abhishek-Mallick/universal-box/tree/main/template).
+::
+
+### Enter your desired project name
+
+### Install dependencies & run the development server
+
+Check the `README.md` file for the specific commands to install dependencies and run the development server.
+
+::code-group
+ ```bash [npm]
+ npm i
+ ```
+ ```bash [yarn]
+ yarn
+ ```
+ ```bash [pnpm]
+ pnpm i
+ ```
+::
+
+Start the development server
+
+::code-group
+ ```bash [npm]
+ npm run dev
+ ```
+ ```bash [yarn]
+ yarn dev
+ ```
+ ```bash [pnpm]
+ pnpm dev
+ ```
+::
+
+::alert{type="success" icon="lucide:circle-check"}
+Well done! A browser window should automatically open for http://localhost:3000.
+::
+
+::
+
+
:ellipsis{right=0px width=75% blur=150px}
::block-hero
@@ -24,67 +112,37 @@ secondary:
- https://github.com/Abhishek-Mallick/universal-box
---
-#title
-The best place to find starter Templates and projects.
-
-#description
-Get your desired template & save hours with full customization from [universal-box](https://universal-box.co/introduction/getting-started).
-
-#extra
- ::list
- - 50+ Project templates for free
- - Easy and fast Installation
- - `README` with proper documentation
- - Fully customizable
- - Industry Standard followed
- - Dependencies are upto date
- - Templates are Updated every week
- ::
-
-#support
- ::terminal
- ---
- content:
- - npm i -g universal-box
- - universal-box init
- - cd
- - See the installation guide from README.md
- - ✨ It's on your localhost
- ---
- ::
-
- ::div
- :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
- ::
-::
::card-grid
-#title
-What's included
-
-#root
-:ellipsis{left=0px width=40rem top=10rem blur=140px}
#default
-
- ::card{icon=IconNuxtStudio}
+
+::card-group
+ ::card{icon=noto:puzzle-piece}
#title
- Prebuilt templates and Projects.
+ Fully Customizable.
#description
- Explore the [Docs](https://universal-box.co) with 50+ project templates, select and download in 2 commands in your local machine for free.
+ Work on top of pre-built templates and customize them to fulfill your unique business requirements.
::
- ::card{icon=noto:puzzle-piece}
+ ::card{icon=material-symbols:laptop-windows-outline-rounded}
#title
- customizable.
+ Quick Project Setup.
#description
- Work on top of pre-built templates and customize them accordingly to fulfil your own buisness case.
+ Start your projects effortlessly with our intuitive commands that scaffold your application in seconds.
::
- ::card{icon=noto:rocket}
+ ::card{icon=i-heroicons-document-text}
#title
- Deploy project with CLI.
+ Comprehensive Documentation.
#description
- comming soon ...
+ Each template comes with a detailed documentation that guides you through setup, usage, and customization options.
::
-::
+
+ ::card{icon=i-heroicons-scissors}
+ #title
+ One-Click Deployments.
+ #description
+ Launch your applications with ease using one-click deployment commands that streamline your workflow.
+ ::
+::
\ No newline at end of file
diff --git a/website/content/index.md b/website/content/index.md
index 4c95506..9057ee1 100644
--- a/website/content/index.md
+++ b/website/content/index.md
@@ -6,7 +6,7 @@ navigation: false
::hero
---
announcement:
- title: 'Release v2.4.2'
+ title: 'Release v2.6.1'
icon: 'noto:party-popper'
to: https://www.npmjs.com/package/universal-box
actions:
@@ -56,57 +56,41 @@ universal-box init
::card-group
::card
---
- title: Prebuilt templates and Projects.
+ title: Prebuilt Templates for Every Need.
icon: i-heroicons-cube
- to: https://nuxt.com/docs/api/components/client-only
+ to: https://universal-box.dev/templates
target: _blank
---
- Explore the [Docs](https://universal-box.co/templates) with 50+ project templates, select and download in 2 commands in your local machine for free.
+ Explore our extensive library of **50+ project templates** designed for various applications. Select and download your preferred template in just two commands!
::
+
::card
---
- title: Customizable
+ title: Tailor-Made Customization.
icon: i-heroicons-arrows-right-left
- to: https://nuxt.com/docs/api/composables/use-app-config
+ to: /api/configuration
target: _blank
---
- Work on top of pre-built templates and customize them accordingly to fulfil your own buisness case.
+ Customize pre-built templates effortlessly to meet your unique business requirements, ensuring your project stands out.
::
+
::card
---
- title: Deploy project with CLI.
+ title: Streamlined Deployment Process.
icon: i-heroicons-scissors
- to: https://nuxt.com/docs/api/utils/dollarfetch
+ to: /getting-started/deployment
target: _blank
---
- Comming soon....
+ Launch your projects with ease using our one-click deployment feature, simplifying the transition from development to production.
::
+
::card
---
- title: Commands
- icon: i-heroicons-command-line
- to: https://nuxt.com/docs/api/commands/add
+ title: Comprehensive Support and Resources.
+ icon: i-heroicons-document-text
+ to: https://universal-box.dev/docs
target: _blank
---
- List of Nuxt CLI commands to init, analyze, build, and preview your application.
- ::
-::
-
-
-
+::
\ No newline at end of file