AngularCSS
HTML-first styles and focused components for AngularTS. Style semantic HTML directly, add TypeScript only for missing interaction, and customize every visual detail through its CSS customization contract.
Catalog
Browse every foundation, element, pattern, component, and recipe.
Foundations
Elements
- button Action controls with `variant` and `size` styling hooks.
- checkbox Native checkbox control styled from native state.
- dialog Modal dialog structure
- input Native form text entry styled directly by AngularCSS.
- kbd Keyboard shortcut hint
- label Label helper that mirrors required/disabled state from its associated control.
- progress Task completion indicator
- radio-group Native radio input grouping with role and focus behavior.
- range A styled native range input with browser-owned interaction and AngularTS model binding.
- scroll-area A semantic native overflow region with styled scrollbars.
- select Native select styling integrated with AngularTS models and form state.
- separator Visual and semantic content separator
- switch Toggleable control with semantic switch state attributes.
- table Semantic data table
- textarea Multi-line text control with state attributes for empty/required/disabled/error.
Patterns
- accordion Expandable content sections
- alert Compact feedback blocks for status and context.
- aspect-ratio Fixed-ratio media wrapper
- avatar User avatar, fallback, badge, and group primitives.
- badge Inline status and metadata labels with semantic variants.
- breadcrumb Page location navigation
- button-group Layout primitive for visually connected buttons and form controls.
- card Sectioned content container using semantic parts.
- chart HTML-first chart container, legend, axis, and tooltip primitives
- description-list Semantic record details
- disclosure HTML-first disclosure state and trigger/panel relationships
- empty Empty state layout
- field Group labels, helper text, and errors with semantic field wrapper selectors.
- file-upload Native file selection and transfer status
- filter-bar Search and filter controls for data views
- input-group Grouped input controls and addon content with shared focus/description wiring.
- input-otp A native one-time-code input with a segmented visual treatment.
- item Flexible list item primitive
- pagination Page navigation links
- popover Floating rich content panels
- skeleton Loading placeholder primitive
- spinner Loading status indicator
- stepper Ordered multi-step workflow navigation
- toggle Pressed-state button primitive with `aria-pressed` state.
- toggle-group Native radio or checkbox groups with a toggle-button presentation.
- validation-summary Linked form validation messages
Components
- calendar Calendar date grid structure
- carousel Accessible drag and snap carousel powered by Embla
- combobox Search input with selectable options
- command Command palette layout
- context-menu Context menu surface and items
- dropdown-menu Menu opened from a trigger button
- hover-card Rich hover preview cards
- menubar Keyboard-first top-level navigation with open/close menu behavior.
- navigation-menu Site navigation with optional flyout content
- range-slider Multiple native range inputs coordinated on one shared track.
- resizable Pointer- and keyboard-resizable split panels powered by `--panel-size` CSS variables.
- sidebar Application sidebar layout with collapsible state
- tabs Tabbed content sections
- toast Notification toaster with close actions and toast variants.
- toolbar Keyboard-navigable groups of actions
- tooltip Contextual hover and focus labels
- tree Hierarchical navigation and selection
Recipes
- alert-dialog Confirmation dialog structure
- application-shell Enterprise application header, navigation, and workspace
- data-table Sortable and filterable semantic table composition
- date-picker Calendar and native popover composition
- drawer Bottom anchored drawer panels
- form-layout Responsive enterprise form composition
- master-detail Resizable record list and detail workspace
- sheet Edge anchored overlay panels