Blocks · Content

Content 2

Answer and documentation sections that stay searchable when collapsed.

FAQ accordion

Bordered accordion answer section with rotating chevrons.

Accordion

Can I use blocks without the CLI?
Yes — every block is plain Astro markup. Copy the section, paste it into a page, and adjust the content. No registry or generator required.
Do blocks add JavaScript?
Only what their parts need. An FAQ block is zero-JS (native details); a settings block ships a few hundred bytes for the switches.
How do I theme a block?
Blocks read the same tokens as components. Override --ui-primary once and every block — and every component inside it — follows.
---
import { Accordion } from "astro-ui";
---

<Accordion
  id="faq"
  variant="bordered"
  items={[
    { value: "f1", title: "Can I use blocks without the CLI?", content: "Yes — every block is plain Astro markup. Copy the section, paste it into a page, and adjust the content." },
    { value: "f2", title: "Do blocks add JavaScript?", content: "Only what their parts need. An FAQ block is zero-JS (native details); a settings block ships a few hundred bytes for the switches." },
    { value: "f3", title: "How do I theme a block?", content: "Blocks read the same tokens as components. Override --ui-primary once and every block follows." },
  ]}
/>

Changelog entry

Dated release entry with version badge and change list.

CardBadgeKbd

v0.1.0Latest

Released Nov 11, 2026

  • AddedRating scale modes and predefined icons
  • ChangedSlider tooltip follows logical properties in RTL
  • FixedBadge overlay anchoring in RTL layouts
Full notesCtrl K to search the changelog
---
import { Card, Badge, Kbd } from "astro-ui";
---

<Card>
  <h3 slot="header" class="block-version">v0.1.0 <Badge variant="success" size="sm">Latest</Badge></h3>
  <p class="block-hint">Released Nov 11, 2026</p>
  <ul class="block-features">
    <li><Badge variant="success" size="sm">Added</Badge> Rating scale modes and predefined icons</li>
    <li><Badge variant="info" size="sm">Changed</Badge> Slider tooltip follows logical properties in RTL</li>
    <li><Badge variant="warning" size="sm">Fixed</Badge> Badge overlay anchoring in RTL layouts</li>
  </ul>
  <div class="block-form-row">
    <span class="block-plan-label">Full notes</span>
    <span><Kbd>Ctrl</Kbd> <Kbd>K</Kbd> to search the changelog</span>
  </div>
</Card>

<style is:global>
  .block-version { display: flex; align-items: center; gap: var(--ui-space-2); margin: 0; }
  .block-hint { margin: 0; color: var(--ui-muted-foreground); font-size: var(--ui-text-sm); }
  .block-features { display: grid; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-4); padding: 0; list-style: none; font-size: var(--ui-text-sm); color: var(--ui-muted-foreground); }
  .block-features li { display: flex; align-items: start; gap: var(--ui-space-2); line-height: var(--ui-leading-normal); }
  .block-features li::before { content: "\2713"; flex-shrink: 0; color: var(--ui-primary); font-weight: var(--ui-font-semibold); }
  .block-form-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
  .block-plan-label { font-size: var(--ui-text-sm); color: var(--ui-muted-foreground); }
</style>