Comment

Includes styles for comments, for example for a blog section on your site.

Usage

The Comment component consists of the comment itself, a comment header, including an avatar, a title and meta text, and a comment body.

Class	Description
`.uk-comment`	Add this class to define the Comment component.
`.uk-comment-body`	Add this class to create a comment body.
`.uk-comment-header`	Add this class to create a comment header.
`.uk-comment-title`	Add this class to a heading to create a comment title.
`.uk-comment-meta`	Add this class to create meta text about your comment.
`.uk-comment-avatar`	Add this class to an `<img>` element to create an avatar for the comment author.

<article class="uk-comment">
  <header class="uk-comment-header">
    <div class="uk-comment-avatar">
      <img src="" alt="" />
    </div>
    <div class="uk-comment-title"></div>
    <ul class="uk-comment-meta uk-subnav"></ul>
  </header>
  <div class="uk-comment-body"></div>
</article>

Tyler Johnson

Just posted

I agree, this was a really insightful article. The historical context provided a great foundation for understanding the current challenges the company is facing.

<article class="uk-comment" tabindex="-1" role="comment">
  <header class="uk-comment-header">
    <div class="uk-flex uk-flex-middle">
      <div class="uk-comment-avatar uk-margin-small-right">
        <img
          src="https://api.dicebear.com/9.x/lorelei/svg?seed=Tyler Johnson"
          alt=""
        />
      </div>
      <div class="uk-flex-1">
        <div class="uk-comment-title"><a href="#">Tyler Johnson</a></div>
        <p class="uk-comment-meta"><a href="#">Just posted</a></p>
      </div>
    </div>
  </header>
  <div class="uk-comment-body">
    <p>
      I agree, this was a really insightful article. The historical context
      provided a great foundation for understanding the current challenges the
      company is facing.
    </p>
  </div>
</article>

Primary modifier

To style a comment differently, for example to highlight it as the admin’s comment, just add the .uk-comment-primary class.

<article class="uk-comment uk-comment-primary">...</article>

John Doe

2 hours ago

This is a great article! I really enjoyed reading about the history of the company and the challenges they faced. The insights provided are valuable for anyone interested in the industry.

<article class="uk-comment uk-comment-primary" tabindex="-1" role="comment">
  <header class="uk-comment-header">
    <div class="uk-flex uk-flex-middle">
      <div class="uk-comment-avatar uk-margin-small-right">
        <img
          src="https://api.dicebear.com/9.x/lorelei/svg?seed=John Doe"
          alt=""
        />
      </div>
      <div class="uk-flex-1">
        <div class="uk-comment-title"><a href="#">John Doe</a></div>
        <p class="uk-comment-meta"><a href="#">2 hours ago</a></p>
      </div>
    </div>
  </header>
  <div class="uk-comment-body">
    <p>
      This is a great article! I really enjoyed reading about the history of the
      company and the challenges they faced. The insights provided are valuable
      for anyone interested in the industry.
    </p>
  </div>
</article>

Lists

Add the .uk-comment-list class to a <ul> element to create a list of comments. You can nest any number of <ul> elements inside a comment list.

<ul class="uk-comment-list">
  <li>
    <article class="uk-comment">...</article>
    <ul>
      <li>
        <article class="uk-comment">...</article>
      </li>
    </ul>
  </li>
</ul>

- John Doe
  
  2 hours ago
  
  This is a great article! I really enjoyed reading about the history of the company and the challenges they faced. The insights provided are valuable for anyone interested in the industry.
  - Jane Smith
    
    1 hour ago
    
    I agree, this was a really insightful article. The historical context provided a great foundation for understanding the current challenges the company is facing.
- Sarah Johnson
  
  4 days ago
  
  I have a few thoughts on this article. While the historical context was interesting, I felt the analysis of the current challenges could have been more in-depth. It would have been helpful to see some concrete recommendations or solutions proposed.
  - Alice Cooper
    
    1 hour ago
    
    I agree, this is a really useful feature. I can see it being great for managing discussions on my blog.
  - Sarah Miller
    
    30 minutes ago
    
    I'm really excited to try this out. It looks like it will make managing comments a breeze.

<ul class="uk-comment-list">
  <li>
    <article class="uk-comment" tabindex="-1" role="comment">
      <header class="uk-comment-header">
        <div class="uk-flex uk-flex-middle">
          <div class="uk-comment-avatar uk-margin-small-right">
            <img
              src="https://api.dicebear.com/9.x/lorelei/svg?seed=John Doe"
              alt=""
            />
          </div>
          <div class="uk-flex-1">
            <div class="uk-comment-title"><a href="#">John Doe</a></div>
            <p class="uk-comment-meta"><a href="#">2 hours ago</a></p>
          </div>
        </div>
      </header>
      <div class="uk-comment-body">
        <p>
          This is a great article! I really enjoyed reading about the history of
          the company and the challenges they faced. The insights provided are
          valuable for anyone interested in the industry.
        </p>
      </div>
    </article>
    <ul>
      <li>
        <article class="uk-comment" tabindex="-1" role="comment">
          <header class="uk-comment-header">
            <div class="uk-flex uk-flex-middle">
              <div class="uk-comment-avatar uk-margin-small-right">
                <img
                  src="https://api.dicebear.com/9.x/lorelei/svg?seed=Jane Smith"
                  alt=""
                />
              </div>
              <div class="uk-flex-1">
                <div class="uk-comment-title"><a href="#">Jane Smith</a></div>
                <p class="uk-comment-meta"><a href="#">1 hour ago</a></p>
              </div>
            </div>
          </header>
          <div class="uk-comment-body">
            <p>
              I agree, this was a really insightful article. The historical
              context provided a great foundation for understanding the current
              challenges the company is facing.
            </p>
          </div>
        </article>
      </li>
    </ul>
  </li>
  <li>
    <article class="uk-comment" tabindex="-1" role="comment">
      <header class="uk-comment-header">
        <div class="uk-flex uk-flex-middle">
          <div class="uk-comment-avatar uk-margin-small-right">
            <img
              src="https://api.dicebear.com/9.x/lorelei/svg?seed=Sarah Johnson"
              alt=""
            />
          </div>
          <div class="uk-flex-1">
            <div class="uk-comment-title"><a href="#">Sarah Johnson</a></div>
            <p class="uk-comment-meta"><a href="#">4 days ago</a></p>
          </div>
        </div>
      </header>
      <div class="uk-comment-body">
        <p>
          I have a few thoughts on this article. While the historical context
          was interesting, I felt the analysis of the current challenges could
          have been more in-depth. It would have been helpful to see some
          concrete recommendations or solutions proposed.
        </p>
      </div>
    </article>
    <ul>
      <li>
        <article class="uk-comment" tabindex="-1" role="comment">
          <header class="uk-comment-header">
            <div class="uk-flex uk-flex-middle">
              <div class="uk-comment-avatar uk-margin-small-right">
                <img
                  src="https://api.dicebear.com/9.x/lorelei/svg?seed=Alice Cooper"
                  alt=""
                />
              </div>
              <div class="uk-flex-1">
                <div class="uk-comment-title"><a href="#">Alice Cooper</a></div>
                <p class="uk-comment-meta"><a href="#">1 hour ago</a></p>
              </div>
            </div>
          </header>
          <div class="uk-comment-body">
            <p>
              I agree, this is a really useful feature. I can see it being great
              for managing discussions on my blog.
            </p>
          </div>
        </article>
      </li>
      <li>
        <article class="uk-comment" tabindex="-1" role="comment">
          <header class="uk-comment-header">
            <div class="uk-flex uk-flex-middle">
              <div class="uk-comment-avatar uk-margin-small-right">
                <img
                  src="https://api.dicebear.com/9.x/lorelei/svg?seed=Sarah Miller"
                  alt=""
                />
              </div>
              <div class="uk-flex-1">
                <div class="uk-comment-title"><a href="#">Sarah Miller</a></div>
                <p class="uk-comment-meta"><a href="#">30 minutes ago</a></p>
              </div>
            </div>
          </header>
          <div class="uk-comment-body">
            <p>
              I'm really excited to try this out. It looks like it will make
              managing comments a breeze.
            </p>
          </div>
        </article>
      </li>
    </ul>
  </li>
</ul>

Accessibility

Set the appropriate WAI-ARIA roles, states and properties to the Comment component.

Set the comment role for each comment.

<ul class="uk-comment-list">
  <li>
    <article class="uk-comment" role="comment">...</article>
    <ul>
      <li>
        <article class="uk-comment" role="comment">...</article>
      </li>
    </ul>
  </li>
</ul>

Theme development

On your tailwind.config.js file, add the Comment component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        comment: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook Name	Affected Classes
`hook-comment`	`.uk-comment`
`hook-body`	`.uk-comment-body`
`hook-header`	`.uk-comment-header`
`hook-title`	`.uk-comment-title`
`hook-meta`	`.uk-comment-meta`
`hook-avatar`	`.uk-avatar`
`hook-list-adjacent`	`.uk-comment-list > :nth-child(n + 2)`
`hook-list-sub`	`.uk-comment-list .uk-comment ~ ul`
`hook-list-sub-adjacent`	`.uk-comment-list .uk-comment ~ ul > :nth-child(n + 2)`
`hook-primary`	`.uk-comment-primary`
`hook-misc`	`*`