# Theme UI

## Docs

- [Box](https://mintlify.wiki/system-ui/theme-ui/api/components/box.md): Layout primitive component with margin, padding, and styling utilities
- [Button](https://mintlify.wiki/system-ui/theme-ui/api/components/button.md): Primitive button component with theme variants and styling utilities
- [Card](https://mintlify.wiki/system-ui/theme-ui/api/components/card.md): Container component for grouped content with theme variants
- [Flex](https://mintlify.wiki/system-ui/theme-ui/api/components/flex.md): Flexbox layout component extending Box with display flex utilities
- [Form Components](https://mintlify.wiki/system-ui/theme-ui/api/components/forms.md): Complete form component library including inputs, selects, checkboxes, and more
- [Grid](https://mintlify.wiki/system-ui/theme-ui/api/components/grid.md): CSS Grid layout component with responsive columns and gap utilities
- [Heading](https://mintlify.wiki/system-ui/theme-ui/api/components/heading.md): Primitive heading component with semantic heading levels
- [Image](https://mintlify.wiki/system-ui/theme-ui/api/components/image.md): Primitive image component with responsive sizing and theme variants
- [Link](https://mintlify.wiki/system-ui/theme-ui/api/components/link.md): Primitive anchor component for navigation and hyperlinks
- [Text](https://mintlify.wiki/system-ui/theme-ui/api/components/text.md): Primitive typography component for inline and block text
- [css](https://mintlify.wiki/system-ui/theme-ui/api/css.md): Core function that processes Theme UI style objects with theme lookups and responsive arrays
- [get](https://mintlify.wiki/system-ui/theme-ui/api/get.md): Utility function for extracting values from deeply nested theme objects with __default key support
- [InitializeColorMode](https://mintlify.wiki/system-ui/theme-ui/api/initialize-color-mode.md): Component to prevent flash of unstyled content during SSR
- [jsx](https://mintlify.wiki/system-ui/theme-ui/api/jsx.md): Custom JSX pragma that adds sx prop support to all elements
- [merge](https://mintlify.wiki/system-ui/theme-ui/api/merge.md): Utility functions for deeply merging theme objects
- [@theme-ui/color-modes](https://mintlify.wiki/system-ui/theme-ui/api/packages/color-modes.md): Color mode utilities for managing light/dark themes and user preferences
- [@theme-ui/components](https://mintlify.wiki/system-ui/theme-ui/api/packages/components.md): Primitive layout, typographic, and UI components with built-in theme support
- [@theme-ui/core](https://mintlify.wiki/system-ui/theme-ui/api/packages/core.md): Minimal React support for Theme UI with the sx prop and ThemeProvider
- [@theme-ui/css](https://mintlify.wiki/system-ui/theme-ui/api/packages/css.md): Framework-agnostic core styling utilities with theme-aware responsive shortcuts
- [@theme-ui/mdx](https://mintlify.wiki/system-ui/theme-ui/api/packages/mdx.md): MDX integration utilities for applying theme styles to MDX content
- [@theme-ui/theme-provider](https://mintlify.wiki/system-ui/theme-ui/api/packages/theme-provider.md): Complete ThemeUIProvider with color modes and root styles
- [sx prop](https://mintlify.wiki/system-ui/theme-ui/api/sx-prop.md): TypeScript type definitions for the sx prop with all supported CSS properties and theme-aware styling
- [ThemeUIProvider](https://mintlify.wiki/system-ui/theme-ui/api/theme-ui-provider.md): Root component that provides theme context with color modes and root styles
- [useColorMode](https://mintlify.wiki/system-ui/theme-ui/api/use-color-mode.md): React hook for reading and updating the current color mode
- [useThemeUI](https://mintlify.wiki/system-ui/theme-ui/api/use-theme-ui.md): React hook to access the theme and color mode context
- [Form Components](https://mintlify.wiki/system-ui/theme-ui/components/forms.md): Form controls including Input, Textarea, Select, Checkbox, Radio, Switch, Slider, and Field components
- [Layout Components](https://mintlify.wiki/system-ui/theme-ui/components/layout.md): Layout primitives including Box, Flex, Grid, and Container for building responsive layouts
- [Components Overview](https://mintlify.wiki/system-ui/theme-ui/components/overview.md): A comprehensive library of primitive React components built with Theme UI for building themeable user interfaces
- [Typography Components](https://mintlify.wiki/system-ui/theme-ui/components/typography.md): Text, Heading, and Paragraph components for themeable typography
- [UI Elements](https://mintlify.wiki/system-ui/theme-ui/components/ui-elements.md): Button, Link, Card, Badge, Alert, Avatar, Spinner, Progress, and other UI components
- [Color Modes](https://mintlify.wiki/system-ui/theme-ui/core-concepts/color-modes.md): Implement dark mode and multiple color schemes with Theme UI's color mode support
- [Responsive Styles](https://mintlify.wiki/system-ui/theme-ui/core-concepts/responsive-styles.md): Use array-based responsive syntax for mobile-first responsive design with Theme UI
- [The sx Prop](https://mintlify.wiki/system-ui/theme-ui/core-concepts/sx-prop.md): Learn how the sx prop enables theme-aware styling with automatic scale lookups, responsive arrays, and CSS pseudo-selectors
- [Theme Specification](https://mintlify.wiki/system-ui/theme-ui/core-concepts/theme-spec.md): The System UI Theme Specification defines standard scales and conventions for interoperable theme objects
- [Theming](https://mintlify.wiki/system-ui/theme-ui/core-concepts/theming.md): Learn how Theme UI's theme object structure works, including design scales and theme-aware styling
- [Custom Components](https://mintlify.wiki/system-ui/theme-ui/guides/custom-components.md): Creating custom themed components with the sx prop and component composition
- [Gatsby Plugin](https://mintlify.wiki/system-ui/theme-ui/guides/gatsby-plugin.md): Using gatsby-plugin-theme-ui for setup, configuration, and shadow files
- [JSX Pragma](https://mintlify.wiki/system-ui/theme-ui/guides/jsx-pragma.md): Using the JSX pragma comment with Theme UI, jsx runtime vs classic runtime
- [MDX Integration](https://mintlify.wiki/system-ui/theme-ui/guides/mdx.md): Using Theme UI with MDX, the @theme-ui/mdx package, Themed components, and useThemedStylesWithMdx hook
- [TypeScript](https://mintlify.wiki/system-ui/theme-ui/guides/typescript.md): TypeScript setup, type definitions, extending theme types, and sx prop types
- [Variants](https://mintlify.wiki/system-ui/theme-ui/guides/variants.md): Creating and using variants in Theme UI for reusable component styles
- [Installation](https://mintlify.wiki/system-ui/theme-ui/installation.md): Install Theme UI and configure it in your React application
- [Introduction](https://mintlify.wiki/system-ui/theme-ui/introduction.md): Build themeable React applications with constraint-based design principles
- [Migrating to v0.14](https://mintlify.wiki/system-ui/theme-ui/migration/v0-14.md): Guide for migrating from Theme UI v0.13 to v0.14
- [Migrating to v0.15](https://mintlify.wiki/system-ui/theme-ui/migration/v0-15.md): Guide for migrating from Theme UI v0.14 to v0.15
- [Migrating to v0.16](https://mintlify.wiki/system-ui/theme-ui/migration/v0-16.md): Guide for migrating from Theme UI v0.15 to v0.16
- [Presets Overview](https://mintlify.wiki/system-ui/theme-ui/presets/overview.md): Learn about Theme UI presets and explore the available preset packages
- [Using Presets](https://mintlify.wiki/system-ui/theme-ui/presets/using-presets.md): Learn how to install, use, and customize Theme UI presets
- [Quickstart](https://mintlify.wiki/system-ui/theme-ui/quickstart.md): Build your first themed component with Theme UI in minutes