# CMS posts

> Posts by status and an editor with tags, word count, preview and publish.

Block · Pro · https://lodeui.com/blocks/cms-posts

## When to use

- Blog and content admin.

## When not to use

- Rich text editing: add a real editor for the body.

## Installation

```bash
npx shadcn@latest add @lode/cms-posts
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CmsPosts } from "@/components/blocks/cms-posts";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CmsPosts />
    </main>
  );
}
```

Built from: Avatar group, Badge, Button, Tabs, Tag input, Textarea

## API reference

### CmsPosts

CMS posts by status and an editor with title, excerpt, tags, body, live word count, preview and publish. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through list and editor |
| ← / → | Switch status tabs |
| Enter / , | Add a tag |

## Accessibility

- Every field is labelled; tags have labelled remove buttons.

## Motion

- Posts animate between status lists.

## Responsive behavior

- The editor moves under the list below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Read time is word count ÷ 230, rounded, at least one minute.

## Related

- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.
- [Textarea](https://lodeui.com/components/textarea) — A textarea that grows with its content, with an optional character counter.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.