---
name: "@stylexui"
slug: "stylexui"
description: "High-performance StyleX & Base UI toolkit for modern dashboards. Modular blocks and production templates, built with zero runtime CSS overhead."
category: "Charts/data viz"
tags: ["blocks", "buttons", "cards", "charts", "dashboard", "forms", "media", "navigation", "overlays", "pro-available"]
framework: "react"
license: null
author: null
website: "https://stylexui.dev"
github: null
registry: "https://stylexui.dev/r/registry.json"
pro: true
pro_url: "https://stylexui.dev/assets/pricing-BKSsSR6J.js"
github_stars: null
component_count: 18
generated_at: "2026-09-21T01:50:16.753Z"
---

# @stylexui

High-performance StyleX & Base UI toolkit for modern dashboards. Modular blocks and production templates, built with zero runtime CSS overhead.

## Links

- Website: https://stylexui.dev
- Registry JSON: https://stylexui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/stylexui
- This file: https://sh4dcn.vercel.app/md/stylexui.md
- Pro / pricing: https://stylexui.dev/assets/pricing-BKSsSR6J.js

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://stylexui.dev/r/registry.json
pnpm dlx shadcn@latest add https://stylexui.dev/r/registry.json
bunx shadcn@latest add https://stylexui.dev/r/registry.json
# fetch the raw registry index
curl -s https://stylexui.dev/r/registry.json
```

## Components (18)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://stylexui.dev/r/index.json` |
| stylex-ui-accordion | registry:ui | A vertically stacked set of interactive headings that each reveal a section of content. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-accordion.json` |
| stylex-ui-alert | registry:ui | Displays a callout for user attention. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-alert.json` |
| stylex-ui-alert-dialog | registry:ui | A modal dialog that interrupts the user with important content and expects a response. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-alert-dialog.json` |
| stylex-ui-aspect-ratio | registry:ui | Displays content within a desired ratio. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-aspect-ratio.json` |
| stylex-ui-attachment | registry:ui | A component for attaching and uploading files with various states and triggers. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-attachment.json` |
| stylex-ui-avatar | registry:ui | An image element with a fallback for representing the user. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-avatar.json` |
| stylex-ui-badge | registry:ui | Displays a badge or a component that looks like a badge. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-badge.json` |
| stylex-ui-breadcrumb | registry:ui | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-breadcrumb.json` |
| stylex-ui-bubble | registry:ui | A message bubble component commonly used in chat and discussion interfaces. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-bubble.json` |
| stylex-ui-button | registry:ui | Displays a button or a component that looks like a button. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-button.json` |
| stylex-ui-button-group | registry:ui | A container that groups related buttons together. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-button-group.json` |
| stylex-ui-calendar | registry:ui | A date field component that allows users to enter and edit date. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-calendar.json` |
| stylex-ui-card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-card.json` |
| stylex-ui-carousel | registry:ui | A carousel with motion and swipe capabilities. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-carousel.json` |
| stylex-ui-chart | registry:ui | Beautiful and interactive charts built using Recharts and StyleX. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-chart.json` |
| stylex-ui-checkbox | registry:ui | A control that allows the user to toggle between checked and not checked. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-checkbox.json` |
| stylex-ui-collapsible | registry:ui | An interactive component which expands/collapses a panel. | `npx shadcn@latest add https://stylexui.dev/r/stylex-ui-collapsible.json` |

## For AI agents

```text
You are adding components from @stylexui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/stylexui.md) for the component list.
2. Fetch the machine-readable index: https://stylexui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: stylexui).
```