Components

Components in una-content you can use.

Docs Components

The Badges under each component title marks compatibility with other doc templates.

Alert

Docus
Preview
Code

Callout

* Nuxt UI Pro

::callout is an alias to ::alert.

Read More

undocs
Preview
Code

Badge

Docus
Preview
Code
Default
Small
Info
Warning
Success
lime
Danger
Outline
Secondary
Link

Code Group

Docus
Nuxt UI Pro
Preview
Code
npm
pnpm
yarn
bun
npm run dev

Card

Docus
Nuxt UI Pro
Preview
Code

Card Group

Nuxt UI Pro
Preview
Code

Icon

Docus
Preview
Code

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.

Terminal
npm i -D @iconify-json/collection-name

@iconify-json/lucide is installed by default.

Smart Icon

0.5.3

You can put iconify icons, emojis and urls in smart-icon. Smart icon will render them automatically.

Preview
Code

Iconify

Emojis

😍🚀🎉

URL

Steps

Preview
Code

Get Starter Template

npm
pnpm
bun
npx nuxi@latest init <project-name> -t github:una-ui/content-starter

Install Dependencies

npm
pnpm
bun
npm install

Development Server

npm
pnpm
bun
npm run dev -- -o

Multi-level headings

0.4.6
Preview
Code
Specify the level of headings to use
::steps{level=5}
Available Headings

h1 through h6. Defaults to h3.

Field

Nuxt UI Pro
Preview
Code
Fieldrequiredstring
'default'
The description can be set as prop or in the default slot with full markdown support.

The text required is configurable in main.fieldRequiredText.

Field Group

Nuxt UI Pro
Preview
Code
withDefaultboolean
true
A field with a default value.
requiredFieldrequiredboolean
A required field.
clear (path?: string)void
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
getErrors (path?: string)FormError[]
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
setErrors (errors: FormError[], path?: string)void
Sets form errors for a given path. If no path is provided, overrides all errors.
errorsRef<FormError[]>
A reference to the array containing validation errors. Use this to access or manipulate the error information.

Tabs

Nuxt UI Pro

Default Style

Preview
Code

PostgreSQL column types

import { integer, pgTable } from 'drizzle-orm/pg-core';

export const table = pgTable('table', {
  int: integer('int')
});

Card Style

Preview
Code
Card Tab
Tab 2
Code Tab

Page Components

Hero

Preview
Code
Release v1.0.0

Effortless and Beautiful
Docs Template.

Beautifully designed Nuxt Content template with shadcn-vue.
Customizable. Compatible. Open Source.

HeroAlt

0.4.0
Preview
Code
Introducing Charts

Build your component library

Beautifully designed components that you can copy and paste into your apps.

Accordion

0.5.0
Preview
Code

The value prop in ::accordion-item is auto-generated by default. You can set them to other unique values and put them in the default-value prop of ::accordion.

Collapsible

0.5.8

Simple

Nuxt UI Pro
Preview
Code

Card

Preview
Code

@peduarte starred 3 repositories