# @synertech/ui > @synertech/ui (Synertech Web/ui) is a React component library styled with Tailwind CSS: 42+ typed, accessible components with dark mode, compatible with Next.js. Version 0.39.1, published on the public npm registry. - Install: `pnpm add @synertech/ui` (or npm, yarn), with no `.npmrc` and no token. Import `@synertech/ui/styles.css` once at the app entry point: the CSS is precompiled, so the app does not need Tailwind CSS. - Requirements: `react` and `react-dom` 18 or later, as peer dependencies. `@mdxeditor/editor` is optional, only for `` through the `@synertech/ui/markdown-editor` entry point. - Builds: ESM and CommonJS with TypeScript types, tree-shakeable. Components that use hooks carry `"use client"`; the others render in React Server Components. - Accessibility: ARIA roles, keyboard navigation and visible focus. `Modal`, `Drawer` and the mobile `Sidebar` trap focus, close on Escape, restore focus and make the background inert; the `useDialogA11y` hook is exported for custom dialogs. - Built-in labels (close, confirm, cancel…) are translatable with `UILabelsProvider`; French labels ship as `frenchUILabels`. - License: free to install and use in any application, commercial or not. Redistributing the library on its own or deriving a competing component library from it is not allowed. There is no public source repository. ## Documentation - [Usage guide](https://ui.synertechweb.com/llms-full.txt): installation, imports, API reference of every component, patterns and anti-patterns, in one Markdown file (written in French) - [Storybook](https://ui.synertechweb.com/storybook/): interactive documentation, props tables and live examples of every component - [npm package](https://www.npmjs.com/package/@synertech/ui): published versions ## Components - [Accordion](https://ui.synertechweb.com/storybook/?path=/docs/layout-accordion--docs) - [AdvanceDetachable](https://ui.synertechweb.com/storybook/?path=/docs/overlay-advancedetachable--docs) - [Avatar](https://ui.synertechweb.com/storybook/?path=/docs/components-avatar--docs) - [Badge](https://ui.synertechweb.com/storybook/?path=/docs/components-badge--docs) - [Banner](https://ui.synertechweb.com/storybook/?path=/docs/components-banner--docs) - [Breadcrumb](https://ui.synertechweb.com/storybook/?path=/docs/navigation-breadcrumb--docs) - [Button](https://ui.synertechweb.com/storybook/?path=/docs/components-button--docs) - [ButtonGroup](https://ui.synertechweb.com/storybook/?path=/docs/components-buttongroup--docs) - [Calendar](https://ui.synertechweb.com/storybook/?path=/docs/components-calendar--docs) - [Card](https://ui.synertechweb.com/storybook/?path=/docs/components-card--docs) - [Checkbox](https://ui.synertechweb.com/storybook/?path=/docs/components-checkbox--docs) - [Chip](https://ui.synertechweb.com/storybook/?path=/docs/components-chip--docs) - [CircularProgress](https://ui.synertechweb.com/storybook/?path=/docs/components-circularprogress--docs) - [DataGrid](https://ui.synertechweb.com/storybook/?path=/docs/data-display-datagrid--docs) - [Detachable](https://ui.synertechweb.com/storybook/?path=/docs/overlay-detachable--docs) - [DeviceMockup](https://ui.synertechweb.com/storybook/?path=/docs/display-devicemockup--docs) - [Divider](https://ui.synertechweb.com/storybook/?path=/docs/components-divider--docs) - [Drawer](https://ui.synertechweb.com/storybook/?path=/docs/overlay-drawer--docs) - [Dropdown](https://ui.synertechweb.com/storybook/?path=/docs/components-dropdown--docs) - [FileSelector](https://ui.synertechweb.com/storybook/?path=/docs/form-fileselector--docs) - [Footer](https://ui.synertechweb.com/storybook/?path=/docs/layout-footer--docs) - [Header](https://ui.synertechweb.com/storybook/?path=/docs/layout-header--docs) - [HelpButton](https://ui.synertechweb.com/storybook/?path=/docs/components-helpbutton--docs) - [HelpButton / Markdown](https://ui.synertechweb.com/storybook/?path=/docs/components-helpbutton-markdown--docs) - [HelpButton / Toolbar Edition](https://ui.synertechweb.com/storybook/?path=/docs/components-helpbutton-toolbar-edition--docs) - [ImageUploader](https://ui.synertechweb.com/storybook/?path=/docs/components-imageuploader--docs) - [Indicator](https://ui.synertechweb.com/storybook/?path=/docs/components-indicator--docs) - [Input](https://ui.synertechweb.com/storybook/?path=/docs/form-input--docs) - [Label](https://ui.synertechweb.com/storybook/?path=/docs/components-label--docs) - [MentionInput](https://ui.synertechweb.com/storybook/?path=/docs/form-mentioninput--docs) - [Modal](https://ui.synertechweb.com/storybook/?path=/docs/components-modal--docs) - [NumberInput](https://ui.synertechweb.com/storybook/?path=/docs/form-numberinput--docs) - [Pagination](https://ui.synertechweb.com/storybook/?path=/docs/navigation-pagination--docs) - [ProgressBar](https://ui.synertechweb.com/storybook/?path=/docs/components-progressbar--docs) - [RadioButton](https://ui.synertechweb.com/storybook/?path=/docs/components-radiobutton--docs) - [SchemaEditor](https://ui.synertechweb.com/storybook/?path=/docs/components-schemaeditor--docs) - [Select](https://ui.synertechweb.com/storybook/?path=/docs/forms-select--docs) - [Sidebar](https://ui.synertechweb.com/storybook/?path=/docs/layout-sidebar--docs) - [Skeleton](https://ui.synertechweb.com/storybook/?path=/docs/feedback-skeleton--docs) - [Slider](https://ui.synertechweb.com/storybook/?path=/docs/components-slider--docs) - [Table](https://ui.synertechweb.com/storybook/?path=/docs/components-table--docs) - [Tabs](https://ui.synertechweb.com/storybook/?path=/docs/components-tabs--docs) - [Toast](https://ui.synertechweb.com/storybook/?path=/docs/components-toast--docs) - [Tooltip](https://ui.synertechweb.com/storybook/?path=/docs/components-tooltip--docs) - [Wizard](https://ui.synertechweb.com/storybook/?path=/docs/navigation-wizard--docs) - [WorkflowEditor](https://ui.synertechweb.com/storybook/?path=/docs/components-workfloweditor--docs) ## Optional - [Showcase (English)](https://ui.synertechweb.com/en/): the components in interactive real-world scenarios: onboarding wizard, dashboard, settings, e-commerce, sign-in… - [Showcase (French)](https://ui.synertechweb.com/): the same page in French - [Storybook index](https://ui.synertechweb.com/storybook/index.json): every story and docs page, as JSON