Introduction

Syncclouds UI is a set of headless React components. Each one handles state, focus, keyboard support and ARIA attributes, and renders plain elements that you style. An optional theme gives you the look of syncclouds.com if you want a starting point.

We are a small web development studio. The library comes from the design system behind our studio site and our own products.

import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger
} from '@syncclouds/ui'

const QUESTIONS = [
  {
    value: 'accessible',
    question: 'Is it accessible?',
    answer:
      'Yes. It follows the WAI-ARIA Accordion pattern, and the arrow keys move between headers.'
  },
  {
    value: 'styled',
    question: 'Is it styled?',
    answer:
      'Only if you import the optional theme. Without it, the parts render plain elements you style yourself.'
  },
  {
    value: 'multiple',
    question: 'Can more than one item open?',
    answer: 'Yes. Set type to multiple and each item opens on its own.'
  }
]

export function AccordionDemo() {
  return (
    <Accordion defaultValue={['accessible']} className="w-full max-w-md">
      {QUESTIONS.map(item => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionHeader>
            <AccordionTrigger>{item.question}</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>{item.answer}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger
} from '@syncclouds/ui'

const QUESTIONS = [
  {
    value: 'accessible',
    question: 'Is it accessible?',
    answer:
      'Yes. It follows the WAI-ARIA Accordion pattern, and the arrow keys move between headers.'
  },
  {
    value: 'styled',
    question: 'Is it styled?',
    answer:
      'Only if you import the optional theme. Without it, the parts render plain elements you style yourself.'
  },
  {
    value: 'multiple',
    question: 'Can more than one item open?',
    answer: 'Yes. Set type to multiple and each item opens on its own.'
  }
]

export function AccordionDemo() {
  return (
    <Accordion defaultValue={['accessible']} className="w-full max-w-md">
      {QUESTIONS.map(item => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionHeader>
            <AccordionTrigger>{item.question}</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>{item.answer}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

Headless, with an optional theme#

Every part renders a plain HTML element with data attributes that describe its state, such as data-state="open". Style those attributes with Tailwind CSS, CSS Modules or plain CSS. The optional theme styles the same attributes, and any class you add wins over it.

<AccordionTrigger className="font-semibold data-[state=open]:text-indigo-600">
  Is it accessible?
</AccordionTrigger>

Built for React 19 and Next.js#

Components that hold state are client components. Everything around them, including your page, can stay on the server. There is no provider to wrap your app in.

Two ways to install#

Install @syncclouds/ui from npm and import what you need. Or copy a component's source into your project with the shadcn CLI and change it however you like. Installation covers both.

Where the library is today#

Syncclouds UI is in development and not published yet. Nine components are ready: Accordion, Copy Button, Dialog, Listbox, Menu, Radio Group, Switch, Tabs and Tooltip. Each one has keyboard tests and an automated accessibility check. Join the waitlist to hear when you can install it.