https://github.com/florextech/florex-ui
Dark-first React component library — 46+ accessible components, design tokens, Tailwind CSS v4, and MCP server by Florex Labs
https://github.com/florextech/florex-ui
accessible component-library dark-theme design-system phosphor-icons react storybook tailwindcss typescript ui-components
Last synced: about 2 months ago
JSON representation
Dark-first React component library — 46+ accessible components, design tokens, Tailwind CSS v4, and MCP server by Florex Labs
- Host: GitHub
- URL: https://github.com/florextech/florex-ui
- Owner: florextech
- License: mit
- Created: 2026-04-26T04:06:44.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-26T05:37:37.000Z (about 2 months ago)
- Last Synced: 2026-04-29T18:38:23.857Z (about 2 months ago)
- Topics: accessible, component-library, dark-theme, design-system, phosphor-icons, react, storybook, tailwindcss, typescript, ui-components
- Language: TypeScript
- Homepage: https://florextech.github.io/florex-ui/
- Size: 287 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# @florexlabs/ui
[](https://www.npmjs.com/package/@florexlabs/ui)
[](https://github.com/florextech/florex-ui/blob/main/LICENSE)
[](https://florextech.github.io/florex-ui/)
Dark-first React component library built with **Tailwind CSS v4**, **TypeScript**, and **CVA**. 46+ accessible, composable components designed for modern web applications.
## Features
- 🌙 **Dark-first** — designed for dark interfaces with green/lime brand accents
- 🧩 **46+ components** — forms, data display, feedback, navigation, overlays, layout
- 🎨 **Design tokens** — CSS variables for colors, spacing, radius, shadows
- ♿ **Accessible** — semantic HTML, ARIA attributes, keyboard navigation
- 📦 **Tree-shakeable** — ESM + CJS, only import what you use
- 🎯 **TypeScript** — full type safety with exported types
- 💚 **Phosphor Icons** — optional integration with [Phosphor Icons](https://phosphoricons.com/)
## Install
```bash
pnpm add @florexlabs/ui
# peer dependencies
pnpm add react react-dom tailwindcss
# icons (optional, recommended)
pnpm add @phosphor-icons/react
```
## Quick Start
```tsx
// 1. Import the CSS tokens in your app entry
import "@florexlabs/ui/florex.css";
// 2. Use components
import { Button, Card, Badge, Input } from "@florexlabs/ui";
function App() {
return (
Subscribe
New
);
}
```
## Components
### Forms
`Button` · `IconButton` · `Input` · `Textarea` · `Select` · `Checkbox` · `Radio` · `Switch` · `Label` · `FormMessage`
### Data Display
`Card` · `Badge` · `Tag` · `Avatar` · `Table` · `Code` · `CodeBlock` · `Kbd` · `Status` · `Stat` · `DataList`
### Typography
`Heading` · `Text` · `Blockquote` · `Highlight` · `List`
### Feedback
`Alert` · `EmptyState` · `Spinner` · `Skeleton` · `Progress`
### Navigation
`Tabs` · `Accordion` · `Breadcrumb` · `Pagination` · `Steps` · `Menu`
### Overlays
`Modal` · `Drawer` · `Popover` · `Tooltip`
### Layout
`Container` · `Section` · `Navbar` · `Stack` · `Divider` · `Timeline` · `TreeView`
### Utility
`VisuallyHidden` · `cn()`
## Icons
We recommend [Phosphor Icons](https://phosphoricons.com/) — 9,000+ icons in 6 weights that match the Florex design system.
```tsx
import { Plus, Gear, Warning } from "@phosphor-icons/react";
import { Button, IconButton, Alert } from "@florexlabs/ui";
Create
} aria-label="Settings" variant="ghost" />
}>Check config
```
Components like Pagination, Accordion, Breadcrumb, and Tag automatically use Phosphor icons when installed, with text fallbacks otherwise.
## Design Tokens
All tokens are available as CSS custom properties via `florex.css`:
```css
/* Colors */
--bg · --surface · --surface-muted · --foreground · --muted · --border
--brand-900 · --brand-700 · --brand-600 · --brand-500 · --brand-300
--danger · --warning · --success
/* Radius */
--radius-sm · --radius-md · --radius-lg · --radius-xl · --radius-full
/* Shadows */
--shadow-card · --shadow-glow
/* Typography */
--font-montserrat · --font-poppins
```
Tokens are also available as TypeScript objects:
```ts
import { colors, spacing, radius, shadows } from "@florexlabs/ui";
```
## Documentation
- **[Storybook](https://florextech.github.io/florex-ui/)** — live component playground
- **[docs/](./docs)** — MDX documentation with props tables and examples
## Development
```bash
pnpm install
pnpm dev # watch mode
pnpm test # run tests (153 tests)
pnpm storybook # component playground
pnpm lint # eslint + tailwind canonical
pnpm build # production build
```
## License
[MIT](./LICENSE) © [Florex Labs](https://florexlabs.com)