# Accesserty UI Kit

Accessible components, without tying your UI to one frontend framework.

Accesserty UI Kit provides accessible Web Components you use through HTML tags. The components run without Vue or React, and you can style them in your own CSS. You do not need a dedicated theme tool.

Free under MIT. Try it in plain HTML.

The component JavaScript has no runtime dependencies. Download the script and open the plain HTML example; that path needs no npm or build step.

## When to reach for UI Kit

If you are building tabs, menus or forms, start with components that already handle keyboard interaction and component state. Connect your application's data and decide what happens after a user interacts.

- Start with accessibility behavior: arrow-key navigation in tabs, menu opening and closing, selection states and semantic structure are implemented inside the components.
- Keep components separate from your framework: the same Web Components have examples for plain HTML, Vue/Nuxt and React/Next. Each framework still needs its own loading, property and event setup. Check that setup when upgrading your framework.
- Style them in CSS: use each component's CSS variables for colors, spacing and borders. Where CSS parts are exposed, the documentation explains how to make finer changes. Adopting the kit does not require a separate theme management tool.

## Find the components you need

Browse [components and examples](https://accesserty.com/en/uikit/#components) for the interface you are building. There are 15 Web Components. Click a component name to read its HTML example on GitHub. To try interactions or adjust styles first, open the Playground: [Preview components and styles](https://accesserty.com/en/uikit/playground/). The [demo directory](https://github.com/Accesserty/UI-Kit/tree/v3.0.2/demo) also contains the latest examples.

- Forms and input: Input (`au-input`), Textarea (`au-textarea`), Checkbox (`au-checkbox`), Radio group (`au-radio-group`), Switch (`au-switch`), Rating (`au-rating`), File upload (`au-file-upload`).
- Navigation and selection: Tabs (`au-tabs`), Dropdown (`au-dropdown`), Pagination (`au-pagination`), Breadcrumbs (`au-breadcrumbs`), Tree (`au-tree`).
- Content presentation: Accordion (`au-accordion`), Card (`au-card`), Carousel (`au-carousel`).

Use native HTML when it meets your needs. Button, Select and Dialog use native HTML elements with optional, separate styles; they are outside the list of 15 Web Components.

## Get one component running

Open [Start integrating](https://accesserty.com/en/uikit/#plain-html-start) and try the live "Service information" tabs. Press Tab to reach a tab, use the Left and Right Arrow keys to switch, then press Tab to enter the content. The HTML below shows how that example is written.

The live demo, HTML and download come before the getting-started steps and framework instructions, which are collapsed by default. If you already have a Vue/Nuxt or React/Next project, expand its setup instructions and follow the [latest framework integration guide](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md#framework-integration) for loading, properties and events.

### Plain HTML: minimal usage and a complete page

The product page includes a minimal two-tab example, a JavaScript download and an expandable, complete HTML page. Download the [latest UI Kit JavaScript](https://accesserty.com/vendors/accesserty-ui-kit.min.js) as `accesserty-ui-kit.min.js`. Save the complete example as `index.html` in the same folder and open it in a browser.

A regular `defer` script tag loads the components, including their base styles. This plain HTML trial needs no npm, build tool or extra stylesheet. For Vue templates or React JSX, use the loading and binding instructions for that framework.

If both paragraphs appear without tabs, check the JavaScript filename, relative path and browser execution settings.

### Vue/Nuxt

Nuxt: copy UI Kit's `dist/` folder into your project (for example `vendor/accesserty/`, not `public/`) and add one module to `nuxt.config.ts`: `modules: ['./vendor/accesserty/accesserty-ui-kit-nuxt.js']`. No plugin of your own, `isCustomElement` setting or `<ClientOnly>` wrapper is needed. See the [Nuxt setup guide](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md#nuxt).

Vue with Vite: load the components, install the `AccessertyVue` plugin and use the kit's `isCustomElement` in the Vite config (not `tag => tag.startsWith('au-')`). `au-input`, `au-textarea`, `au-checkbox`, `au-switch`, `au-radio-group`, `au-rating` and `au-file-upload` work with `v-model` under the same rules as native Vue fields, so a group of checkboxes can share one array. See the [Vue 3 setup guide](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md#vue-3).

### React/Next

React 19: form components have React counterparts (`AuInput`, `AuCheckbox` and others) that use `value`/`checked` and `onChange` like native fields; use the other components directly as `au-*` tags. The React integration needs React 19. See the [React and Next.js setup guide](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md#react-and-nextjs).

Next: call `defineElements()` once in a client component. The server renders the tags and their initial values, and internal controls are built when JavaScript runs in the browser. With a custom Next server, `withDeclarativeShadow` renders accordion, tabs and breadcrumbs on the server (custom servers are not supported on Vercel). The Nuxt module does this by default.

The [Next form integration fixture](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/test/ssr/next-react/app/Form.jsx) loads a copied dist from `vendor/`, as a project would. Change the paths to where you keep the files.

A shared [Next/Nuxt fixtures and coverage](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/test/ssr/README.md) link follows both framework setups. It is available without opening the other framework's instructions.

## Connect your data and make it fit your site

### Read data and respond to actions

Follow each component's documentation to set field values, read input and handle user actions. For forms, check event payloads, property updates, FormData support and reset behavior for the components you use. FormData is not a universal data interface for every component. See the [binding and form examples](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/test/ssr/README.md).

File upload handles file selection. Your application sends the files, and your server needs to validate them.

### Adjust the appearance in CSS

Set the exposed variables in your stylesheet. For example, add `class="example-tabs"` to `<au-tabs>` and use this CSS to change the tab background and selected colors:

```css
.example-tabs {
  --au-tabs-bg: #f5f5f5;
  --au-tabs-selected-bg: #222;
  --au-tabs-selected-text-color: #fff;
}
```

This is an example to apply in your project; the live demo on the product page keeps its original appearance. The [styling guide](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md#styling) lists the variables and CSS parts available for each component.

You can also open the Playground: [Preview components and styles](https://accesserty.com/en/uikit/playground/). Copy the CSS into your stylesheet after making changes, and apply its class name to the matching element. The Playground exports only changed CSS variables; unchanged settings produce no style rules. Add component HTML and JavaScript to your project separately.

### Supply your own text and translations

The "Services" and "Contact" labels in the live example come from the page. Replace them with the tab names your site needs. Your product also supplies field labels, hints and status text through attributes or content, using your existing translation system if you have one. UI Kit does not translate automatically. See the [translation attributes](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md#localization) for each component's text settings.

## Can I use just the components I need?

Yes. UI Kit's `dist/components/` has 15 single-component files (regular and minified), each with the shared code it needs, so you can copy only the components you use. See the [latest README](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md). The website's JavaScript download is the full bundle; when you copy single components, your project manages their updates.

## Can I use it in commercial projects?

Yes. UI Kit is free to use and modify under the MIT License, including for company and client websites. Include the copyright and license notice when distributing the code. See the [MIT License](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/LICENSE) for the full terms.

## Inspect the source and tests

The latest download and documentation use the same release. You can inspect the source, HTML demos, component tests and framework integration tests. Integration fixtures use Nuxt 4, Vue with Vite, and Next 16 with React 19; the React integration needs React 19. Coverage does not extend to every framework version, complete application or assistive-technology combination.

### What should you test on your site?

Complete real tasks with the keyboard and check visible focus, content switching and state updates. After styling, check text contrast and operation on narrow screens. After changing text or language, use a screen reader to check names, states and content. Test your forms, routes and data updates in your own application as well.

Components cannot make a whole site WCAG-conformant automatically. The Playground and component tests cover their own scenarios; a complete site still needs manual and assistive-technology testing. Before upgrading components or your framework, re-test loading, bindings and complete flows on staging. [Report or review issues](https://github.com/Accesserty/UI-Kit/issues) if something does not work as expected.

### Latest documentation, license and tests

- [Latest README](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md)
- [MIT License](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/LICENSE)
- [Source](https://github.com/Accesserty/UI-Kit/tree/v3.0.2/src)
- [Demos and component documentation](https://github.com/Accesserty/UI-Kit/tree/v3.0.2/demo)
- [Test source](https://github.com/Accesserty/UI-Kit/tree/v3.0.2/test) and [run instructions](https://github.com/Accesserty/UI-Kit/blob/v3.0.2/README.md#development)

## Current Entry Points

- Product page: https://accesserty.com/en/uikit/
- Components and examples: https://accesserty.com/en/uikit/#components
- Start integrating: https://accesserty.com/en/uikit/#plain-html-start
- Preview components and styles: https://accesserty.com/en/uikit/playground/
- GitHub: https://github.com/Accesserty/UI-Kit