Skip to main content
ShadcnUI
Navigation

ShadcnUI Gallery

Transport-neutral Phoenix components with shadcn-style semantic tokens and complete ordinary routes.

Semantic page baseline The route renders authored landmarks, headings, content, and ordinary destinations.

Representative components

Button

Button primary example
Choose specimen view
Open Button

HEEX source

<.button type="submit" variant={:default}>Save changes</.button>

Accordion

Exclusive FAQ
Choose specimen view
Open Accordion
Is it accessible?
Yes — <details>/<summary> ship with keyboard support and correct semantics, and the content stays in the DOM for crawlers and find-in-page.
Can it animate height: auto?
Yes. interpolate-size: allow-keywords on the wrapper lets ::details-content transition from height: 0 to height: auto. No measuring, no JavaScript.
Only one open at a time?
The name attribute makes the group exclusive — the browser closes the others for you.

HEEX source

<.accordion id="faq" mode={:exclusive}>
  <:item key="accessibility" summary="Is it accessible?" open>
    Yes — <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> ship with keyboard support and
    correct semantics, and the content stays in the DOM for crawlers and find-in-page.
  </:item>
  <:item key="animation" summary="Can it animate height: auto?">
    Yes. <code>interpolate-size: allow-keywords</code> on the wrapper lets
    <code>::details-content</code> transition from <code>height: 0</code> to
    <code>height: auto</code>. No measuring, no JavaScript.
  </:item>
  <:item key="grouping" summary="Only one open at a time?">
    The <code>name</code> attribute makes the group exclusive — the browser closes the others
    for you.
  </:item>
</.accordion>

Carousel

Carousel primary example
Choose specimen view
Open Carousel

Use native scrolling or the labelled item links. Open the complete media browser or inspect capability evidence.

Original local images

Each destination opens the complete original image.

  1. Angular mountain ridges beneath a warm sun
    Angular mountain ridges beneath a warm sun
    Open complete image
  2. A white sailboat crossing a blue harbor
    A white sailboat crossing a blue harbor
    Open complete image
  3. Three evergreen trees on a low green hill
    Three evergreen trees on a low green hill
    Open complete image

Snap: none

  1. Reading card 1

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  2. Reading card 2

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  3. Reading card 3

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  4. Reading card 4

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

Snap: proximity

  1. Reading card 1

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  2. Reading card 2

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  3. Reading card 3

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  4. Reading card 4

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

Snap: mandatory

  1. Reading card 1

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  2. Reading card 2

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  3. Reading card 3

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

  4. Reading card 4

    All content is present. Snap only changes where native scrolling settles.

    Browse the complete collection

One item and real local controls

  1. No submission or persistence. The reset button restores native defaults.

Oversized content and long collections

  1. Chapter 1

    Document order and keyboard access stay intact.

    Open media browser

  2. Chapter 2

    Document order and keyboard access stay intact.

    Open media browser

  3. Chapter 3

    Document order and keyboard access stay intact.

    Open media browser

  4. Chapter 4

    Document order and keyboard access stay intact.

    Open media browser

  5. Chapter 5

    Document order and keyboard access stay intact.

    Open media browser

  6. Chapter 6

    Document order and keyboard access stay intact.

    Open media browser

  7. Chapter 7

    Document order and keyboard access stay intact.

    Open media browser

  8. Chapter 8

    Document order and keyboard access stay intact.

    Open media browser

  9. Chapter 9

    Document order and keyboard access stay intact.

    Open media browser

  10. Chapter 10

    Document order and keyboard access stay intact.

    Open media browser

  11. Chapter 11

    Document order and keyboard access stay intact.

    Open media browser

  12. Chapter 12

    Document order and keyboard access stay intact.

    Open media browser

Right-to-left layout

  1. Angular mountain ridges beneath a warm sun
    Angular mountain ridges beneath a warm sun
    Open complete image
  2. A white sailboat crossing a blue harbor
    A white sailboat crossing a blue harbor
    Open complete image
  3. Three evergreen trees on a low green hill
    Three evergreen trees on a low green hill
    Open complete image

HEEX source

Support and exact fallback

Gallery discovery support and fallback
Feature Locked-engine evidence When missing
Semantic page baseline Controller and static-export tests exercise the same closed route. Without optional gallery presentation, complete content and ordinary destinations remain in document order.

Without optional gallery presentation, complete content and ordinary destinations remain in document order.