# AuraGlass 5.0.2 > React 19 component system with a layered glass material (`aura-glass`). Import components by canonical name, style them through `data-ag-part` and `data-state` attributes and the `ag` cascade layer, and add certified registry blocks with `aura-glass-cli`. This file is generated from `package.json`, the exports manifest and the component metas; version 5.0.2. > 114 components · registry: 15 blocks · tarball: 0.66 MB ## Install - `npm install aura-glass@^5` - `npx aura-glass-cli init` (writes `auraglass.json` and the `aura-glass/styles.css` import plus layer statement) - `npx aura-glass-cli add ` (shadcn-format registry items) - Upgrading from 4.x: `npx aura-glass-cli migrate 4to5 --dry-run` - MCP server for agents: `npx aura-glass-mcp` (stdio; tools `search_components`, `get_component`, `list_registry`, `get_registry_item`, `get_migration`) ## Subpaths - `aura-glass` — Accordion, ActivityFeed, Alert, AlertDialog, Avatar, AvatarGroup, Badge, Breadcrumbs, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, Collapsible, ColorPicker, Combobox, Command, CommandPalette, Container, DescriptionList, Dialog, EmptyState, ErrorState, Field, Fieldset, FileUpload, Form, Grid, Heading, IconButton, ImageList, InlineEdit, Kbd, Link, LoadingState, Menu, Meter, NumberField, Pagination, Popover, Progress, RadioGroup, Rating, ScrollArea, SearchField, SegmentedControl, Select, Separator, Sheet, Skeleton, Slider, SourceTransition, Stack, Steps, Switch, TabBar, Tabs, Text, TextField, Timeline, Toast, ToggleGroup, Toolbar, Tooltip, Tour - `aura-glass/material` - `aura-glass/theme` - `aura-glass/tokens` - `aura-glass/motion` - `aura-glass/primitives` — DismissableLayer, FocusScope, Label, Portal, Slot, VisuallyHidden - `aura-glass/icons` — Icon - `aura-glass/forms` - `aura-glass/app-shell` — AppShell, Inspector, MobileShell, ResizablePanels, Sidebar, SidebarDrawer, StatusBar, TopBar - `aura-glass/data` — ChartFrame, Chip, FilterBar, KeyValueEditor, Sparkline, StatCard, Table, TreeView - `aura-glass/date` — Calendar, DateField, DatePicker, DateRangePicker, RangeCalendar, TimeField, TimePicker - `aura-glass/ai` — AgentSteps, Citation, Composer, Message, ProviderErrorState, Reasoning, SourceList, StreamingText, Thread, ToolCall, UsageMeter - `aura-glass/media` — CarouselRail, ImageViewer, MediaControls, MediaScrubber, NowPlayingBar - `aura-glass/backdrops` — Backdrop - `aura-glass/three` - `aura-glass/charts` — Chart - `aura-glass/compat` - `aura-glass/styles.css` — stylesheet - `aura-glass/tokens.css` — stylesheet - `aura-glass/material.css` — stylesheet - `aura-glass/tailwind.css` — stylesheet - `aura-glass/compat/tokens.css` — stylesheet - `aura-glass/compat/globals.css` — stylesheet - `aura-glass/deprecations.json` — data ## Components - [Button](https://auraglass-48859d.gitlab.io/components/button.md): `aura-glass`, T1 - [IconButton](https://auraglass-48859d.gitlab.io/components/icon-button.md): `aura-glass`, T1 - [ToggleGroup](https://auraglass-48859d.gitlab.io/components/toggle-group.md): `aura-glass`, T1 - [Toolbar](https://auraglass-48859d.gitlab.io/components/toolbar.md): `aura-glass`, T1 - [SegmentedControl](https://auraglass-48859d.gitlab.io/components/segmented-control.md): `aura-glass`, T1 - [Switch](https://auraglass-48859d.gitlab.io/components/switch.md): `aura-glass`, T1 - [Slider](https://auraglass-48859d.gitlab.io/components/slider.md): `aura-glass`, T1 - [Checkbox](https://auraglass-48859d.gitlab.io/components/checkbox.md): `aura-glass`, T1 - [CheckboxGroup](https://auraglass-48859d.gitlab.io/components/checkbox-group.md): `aura-glass`, T1 - [RadioGroup](https://auraglass-48859d.gitlab.io/components/radio-group.md): `aura-glass`, T1 - [Field](https://auraglass-48859d.gitlab.io/components/field.md): `aura-glass`, T1 - [Fieldset](https://auraglass-48859d.gitlab.io/components/fieldset.md): `aura-glass`, T1 - [Form](https://auraglass-48859d.gitlab.io/components/form.md): `aura-glass`, T1 - [TextField](https://auraglass-48859d.gitlab.io/components/text-field.md): `aura-glass`, T1 - [SearchField](https://auraglass-48859d.gitlab.io/components/search-field.md): `aura-glass`, T1 - [Select](https://auraglass-48859d.gitlab.io/components/select.md): `aura-glass`, T1 - [Combobox](https://auraglass-48859d.gitlab.io/components/combobox.md): `aura-glass`, T1 - [NumberField](https://auraglass-48859d.gitlab.io/components/number-field.md): `aura-glass`, T1 - [Calendar](https://auraglass-48859d.gitlab.io/components/calendar.md): `aura-glass/date`, T1 - [DateField](https://auraglass-48859d.gitlab.io/components/date-field.md): `aura-glass/date`, T1 - [DatePicker](https://auraglass-48859d.gitlab.io/components/date-picker.md): `aura-glass/date`, T1 - [DateRangePicker](https://auraglass-48859d.gitlab.io/components/date-range-picker.md): `aura-glass/date`, T1 - [TimeField](https://auraglass-48859d.gitlab.io/components/time-field.md): `aura-glass/date`, T2 - [TimePicker](https://auraglass-48859d.gitlab.io/components/time-picker.md): `aura-glass/date`, T2 - [Dialog](https://auraglass-48859d.gitlab.io/components/dialog.md): `aura-glass`, T1 - [AlertDialog](https://auraglass-48859d.gitlab.io/components/alert-dialog.md): `aura-glass`, T1 - [Sheet](https://auraglass-48859d.gitlab.io/components/sheet.md): `aura-glass`, T1 - [Popover](https://auraglass-48859d.gitlab.io/components/popover.md): `aura-glass`, T1 - [Tooltip](https://auraglass-48859d.gitlab.io/components/tooltip.md): `aura-glass`, T1 - [Menu](https://auraglass-48859d.gitlab.io/components/menu.md): `aura-glass`, T1 - [Toast](https://auraglass-48859d.gitlab.io/components/toast.md): `aura-glass`, T1 - [AppShell](https://auraglass-48859d.gitlab.io/components/app-shell.md): `aura-glass/app-shell`, T1 - [Sidebar](https://auraglass-48859d.gitlab.io/components/sidebar.md): `aura-glass/app-shell`, T1 - [TopBar](https://auraglass-48859d.gitlab.io/components/top-bar.md): `aura-glass/app-shell`, T1 - [Tabs](https://auraglass-48859d.gitlab.io/components/tabs.md): `aura-glass`, T1 - [TabBar](https://auraglass-48859d.gitlab.io/components/tab-bar.md): `aura-glass`, T1 - [Breadcrumbs](https://auraglass-48859d.gitlab.io/components/breadcrumbs.md): `aura-glass`, T1 - [Pagination](https://auraglass-48859d.gitlab.io/components/pagination.md): `aura-glass`, T1 - [Command](https://auraglass-48859d.gitlab.io/components/command.md): `aura-glass`, T1 - [CommandPalette](https://auraglass-48859d.gitlab.io/components/command-palette.md): `aura-glass`, T1 - [ResizablePanels](https://auraglass-48859d.gitlab.io/components/resizable-panels.md): `aura-glass/app-shell`, T1 - [SourceTransition](https://auraglass-48859d.gitlab.io/components/source-transition.md): `aura-glass`, T1 - [Table](https://auraglass-48859d.gitlab.io/components/table.md): `aura-glass/data`, T1 - [TreeView](https://auraglass-48859d.gitlab.io/components/tree-view.md): `aura-glass/data`, T1 - [FilterBar](https://auraglass-48859d.gitlab.io/components/filter-bar.md): `aura-glass/data`, T1 - [StatCard](https://auraglass-48859d.gitlab.io/components/stat-card.md): `aura-glass/data`, T1 - [ChartFrame](https://auraglass-48859d.gitlab.io/components/chart-frame.md): `aura-glass/data`, T1 - [Sparkline](https://auraglass-48859d.gitlab.io/components/sparkline.md): `aura-glass/data`, T2 - [ActivityFeed](https://auraglass-48859d.gitlab.io/components/activity-feed.md): `aura-glass`, T1 - [Timeline](https://auraglass-48859d.gitlab.io/components/timeline.md): `aura-glass`, T1 - [Thread](https://auraglass-48859d.gitlab.io/components/thread.md): `aura-glass/ai`, T1 - [Message](https://auraglass-48859d.gitlab.io/components/message.md): `aura-glass/ai`, T1 - [Composer](https://auraglass-48859d.gitlab.io/components/composer.md): `aura-glass/ai`, T1 - [ToolCall](https://auraglass-48859d.gitlab.io/components/tool-call.md): `aura-glass/ai`, T1 - [Citation](https://auraglass-48859d.gitlab.io/components/citation.md): `aura-glass/ai`, T1 - [SourceList](https://auraglass-48859d.gitlab.io/components/source-list.md): `aura-glass/ai`, T2 - [MediaControls](https://auraglass-48859d.gitlab.io/components/media-controls.md): `aura-glass/media`, T2 - [NowPlayingBar](https://auraglass-48859d.gitlab.io/components/now-playing-bar.md): `aura-glass/media`, T2 - [CarouselRail](https://auraglass-48859d.gitlab.io/components/carousel-rail.md): `aura-glass/media`, T2 ## Do not - Do not import `Glass*` names from `aura-glass`: they are 4.x names. Use the canonical name (`Dialog`, not the 4.x modal) or the time-boxed `aura-glass/compat` adapter while migrating. - Do not set inline optics (blur, saturation, tint, opacity) through `style`; pick a material variant or token instead. - Do not use `!important`; AuraGlass styles live in the `ag` layer, so unlayered app CSS already wins. - Do not target internal class names; style via `[data-ag-part="…"]` and `[data-state="…"]` selectors. - Do not reference components removed in 5.0; `get_migration` names the replacement. ## Versions - `5.0.2` — this package, published on the `latest` dist-tag - `5.x` — current stable on `latest` - `4.x` — LTS on `v4-lts`: fixes and security only for 12 months after the 5.0 GA - `<4.x` — unsupported npm dist-tags today (checked by `verify-release-comms --dist-tags`): - `latest`: 5.0.2 - `next`: none - `v4-lts`: 4.1.0 ## Optional - [Full reference (components and guides)](https://auraglass-48859d.gitlab.io/llms-full.txt) - [Docs](https://auraglass-48859d.gitlab.io/)