![\"Language](\"https://img.shields.io/lgtm/grade/javascript/g/fabien-ml/hope-ui.svg?logo=lgtm&logoWidth=18\")
\n \n \n ![\"MIT](\"https://img.shields.io/github/license/fabien-ml/hope-ui\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/v/@hope-ui/solid\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@hope-ui/solid.svg\")
\n \n\n \n
\n \n \n \n \n \n \n
\n {local.snippet}\n \n \n );\n}\n"
},
{
"path": "apps/docs/src/components/ColorScale.tsx",
"content": "import {\n Box,\n Grid,\n GridItem,\n GridProps,\n hope,\n HStack,\n SystemConfig,\n useTheme,\n VStack,\n} from \"@hope-ui/solid\";\nimport { For, splitProps } from \"solid-js\";\n\nexport interface ColorScaleItem {\n name: string;\n token: keyof SystemConfig[\"theme\"][\"colors\"];\n}\n\ntype ColorScaleProps = GridProps & {\n scale: ColorScaleItem[];\n};\n\nexport function ColorScale(props: ColorScaleProps) {\n const theme = useTheme();\n const [local, others] = splitProps(props, [\"scale\"]);\n\n return (\n css prop\n | \n {item.name}\n | \n |
|---|---|
| \n Description\n | \n{item.description} | \n
| \n Type\n | \n|
| \n Default\n | \n{item.defaultValue} | \n
| Prop | \n //Description | \n //Type | \n //Default | \n //
|---|---|---|---|
| {item.description} | \n //\n // {item.type}\n // | \n //{item.defaultValue} | \n //
| Prop | \nCSS property | \nTheme token | \n
|---|---|---|
| {item.prop} | \n{item.cssProperty} | \n\n {item.themeToken || \"none\"}\n | \n
heading.\n caret-down icon that rotates based on the\n expanded/collapsed state.\n defaultIndex prop to set an item expanded by default.\n allowMultiple prop to permit multiple items to be expanded at once.\n index or defaultIndex{\" \"}\n prop is an array.\n AccordionButton component has aria-expanded set to{\" \"}\n true or false depending on the state of the{\" \"}\n AccordionItem. That means you can use the _expanded style prop to\n style this state.\n expanded and disabled.\n index and onChange props to control the{\" \"}\n Accordion.\n AccordionButton should be wrapped in an element with role{\" \"}\n heading.\n AccordionButton as role set to button.\n AccordionButton as aria-controls set to the id of\n its associated AccordionPanel.\n AccordionButton as aria-expanded set to true when\n its associated AccordionPanel is expanded, false otherwise.\n AccordionPanel as role set to region.\n AccordionPanel as aria-labelledby set to the id of\n its associated AccordionButton.\n Accordion base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n AccordionButton and AccordionPanel composes{\" \"}\n AccordionIcon composes{\" \"}\n Avatar component is used to represent a user, and displays the profile\n picture, initials or fallback icon.\n size prop to change the size of the Avatar. You can set the value to{\" \"}\n 2xs, xs, sm, md, lg,{\" \"}\n xl or 2xl.\n src of the avatar, there are 2 fallbacks:\n name prop, we use it to generate the initials.\n name prop, we use a default avatar.\n bg prop.\n icon prop.\n icon is a render prop that provides proper role and{\" \"}\n aria-label attributes to use in your custom icon.\n em for the size of the AvatarBadge. This is\n useful to size the badge relative to the avatar font size.\n AvatarGroup{\" \"}\n component.\n size prop.\n spacing prop.\n AvatarExcess component.\n getInitials prop to manage how initials are generated from name. By\n default Hope UI merge the first characters of each word in the name prop.\n Avatar base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n colorScheme prop to change the color of the Badge. You can set the\n value to primary, accent, neutral,{\" \"}\n success, info, warning or danger.\n variant prop to change the visual style of the Badge. You can set the\n value to solid, subtle or outline.\n Badge base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Icon component is used to render svg.\n Icon component from @hope-ui/solid.\n as prop.\n Icon component.\n createIcon function.\n @hope-ui/solid:\n Icon component\n Icon component renders as an svg element.\n createIcon function\n createIcon function is a convenience wrapper around the process of\n generating icons with Icon, allowing you to achieve the same functionality with\n less effort.\n svg from{\" \"}\n color style prop, set the fill or stroke{\" \"}\n prop of your svg path to currentColor.\n children is not provided, the Icon component renders a\n fallback icon.\n Icon render an svg, you can use any svg attributes.\n Icon props\n createIcon options\n Image component is used to display images.\n boxSize prop.\n borderRadius prop.\n Image component allows you provide a fallback placeholder. The placeholder\n is displayed when:\n fallback or fallbackSrc prop is provided.\n src is currently loading.\n src.\n src prop was passed.\n ignoreFallback prop.\n kbd element.\n List component is used to display list items. It renders a ul{\" \"}\n element by default.\n ListIcon component. The size of the\n icon is relative to the font size of the list item.\n ListItem composes{\" \"}\n ListIcon composes{\" \"}\n table{\" \"}\n element by default.\n | To convert | \ninto | \nmultiply by | \n
|---|---|---|
| inches | \nmillimetres (mm) | \n25.4 | \n
| feet | \ncentimetres (cm) | \n30.48 | \n
| yards | \nmetres (m) | \n0.91444 | \n
| To convert | \ninto | \nmultiply by | \n
striped prop to render striped rows. You can set the value to{\" \"}\n even or odd.\n | To convert | \ninto | \nmultiply by | \n
|---|---|---|
| inches | \nmillimetres (mm) | \n25.4 | \n
| feet | \ncentimetres (cm) | \n30.48 | \n
| yards | \nmetres (m) | \n0.91444 | \n
| To convert | \ninto | \nmultiply by | \n
dense prop to reduce the table size.\n | To convert | \ninto | \nmultiply by | \n
|---|---|---|
| inches | \nmillimetres (mm) | \n25.4 | \n
| feet | \ncentimetres (cm) | \n30.48 | \n
| yards | \nmetres (m) | \n0.91444 | \n
| To convert | \ninto | \nmultiply by | \n
highlightOnHover prop to highlight row on hover.\n | To convert | \ninto | \nmultiply by | \n
|---|---|---|
| inches | \nmillimetres (mm) | \n25.4 | \n
| feet | \ncentimetres (cm) | \n30.48 | \n
| yards | \nmetres (m) | \n0.91444 | \n
| To convert | \ninto | \nmultiply by | \n
Table base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n | To convert | \ninto | \nmultiply by | \n
|---|---|---|
| inches | \nmillimetres (mm) | \n25.4 | \n
| feet | \ncentimetres (cm) | \n30.48 | \n
| yards | \nmetres (m) | \n0.91444 | \n
| To convert | \ninto | \nmultiply by | \n
| To convert | \ninto | \nmultiply by | \n
|---|---|---|
| inches | \nmillimetres (mm) | \n25.4 | \n
| feet | \ncentimetres (cm) | \n30.48 | \n
| yards | \nmetres (m) | \n0.91444 | \n
| To convert | \ninto | \nmultiply by | \n
| To convert | \ninto | \nmultiply by | \n
|---|---|---|
| inches | \nmillimetres (mm) | \n25.4 | \n
| feet | \ncentimetres (cm) | \n30.48 | \n
| yards | \nmetres (m) | \n0.91444 | \n
| To convert | \ninto | \nmultiply by | \n
| To convert | \ninto | \nmultiply by | \n
|---|---|---|
| inches | \nmillimetres (mm) | \n25.4 | \n
| feet | \ncentimetres (cm) | \n30.48 | \n
| yards | \nmetres (m) | \n0.91444 | \n
| To convert | \ninto | \nmultiply by | \n
Tag component is used for items that need to be labeled, categorized, or\n organized using keywords that describe them.\n colorScheme prop to change the color of the Tag You can set the value\n to primary, accent, neutral, success,{\" \"}\n info, warning or danger.\n size prop to change the size of the Tag You can set the value to{\" \"}\n sm, md or lg.\n variant prop to change the visual style of the Tag You can set the\n value to solid, subtle, outline or dot.\n TagLeftIcon and{\" \"}\n TagRightIcon components respectively.\n TagCloseButton component to add a close button to the Tag\n Tag base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Checkbox component is used in forms when a user needs to select multiple\n values from several options.\n label and a visualy hidden input with\n type set to checkbox.\n CheckboxPrimitive is in a checked or indeterminate{\" \"}\n state.\n CheckboxPrimitive.\n Checkbox components and conveniently pass a few shared style props to each.\n colorScheme prop to change the color of the Checkbox. You can set the\n value to primary, accent, neutral,{\" \"}\n success, info, warning or danger.\n size prop to change the size of the Checkbox. You can set the value to{\" \"}\n sm, md or lg.\n variant prop to change the visual style of the Checkbox. You can set\n the value to outline or filled.\n labelPlacement prop to change the placement of the label. You can set\n the value to start or end.\n disabled prop to disable the Checkbox.\n invalid prop to mark the Checkbox as invalid.\n indeterminate prop to mark the Checkbox as indeterminate.\n iconChecked and iconIndeterminate prop on{\" \"}\n CheckboxControl to change the Checkbox icon.\n CheckboxGroup component to manage the checked state of related{\" \"}\n Checkbox components and conveniently pass a few shared style props to each. See\n the props table at the bottom of this page for a list of the shared styling props.\n CheckboxPrimitive component to achieve your desired design.\n You can pair it with your styling solution of choice. The below example uses style props and\n the css function.\n Checkbox base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Checkbox composes the CheckboxPrimitive component, so you can pass\n all its props. These are props specific to the Checkbox component:\n required, disabled and{\" \"}\n invalid to form elements. It follows the{\" \"}\n required prop to make the form control required. The Input field will\n have aria-required set to true, and the FormLabel{\" \"}\n will show a red asterisk.\n disabled prop to make the form control disabled.\n invalid prop to make the form control invalid. the{\" \"}\n FormErrorMessage will only show up when the invalid prop is true.\n Select component instead of{\" \"}\n SimpleSelect.\n FormControl and others Hope UI form\n related components with the{\" \"}\n id passed to the form control will be passed to the input directly.\n FormLabel will have for pointing to the id of the\n input.\n aria-describedby pointing to the id of the{\" \"}\n FormHelperText.\n aria-invalid set to{\" \"}\n true and aria-describedby pointing to the id of the{\" \"}\n FormErrorMessage first.\n required, disabled, invalid and{\" \"}\n readOnly props passed to FormControl will cascade across all\n related components.\n FormLabel is aware of the disabled, focused and{\" \"}\n invalid state of the input. This helps you style the label accordingly using\n the _disabled, _focus, and _invalid style props.\n FormErrorMessage only renders if invalid is set to{\" \"}\n true.\n FormControl base styles and default props can be overridden in the Hope UI\n theme configuration like below:\n Input component is a component that is used to get user input in a text\n field.\n size prop to change the size of the Input. You can set the value to{\" \"}\n xs, sm, md or lg.\n size attribute you can use the{\" \"}\n htmlSize prop. For it to work as expected you will also need to provide the{\" \"}\n width prop set to auto.\n variant prop to change the visual style of the Input. You can set the\n value to outline, filled or unstyled.\n Input component. Hope UI\n exports InputGroup, InputLeftAddon and{\" \"}\n InputRightAddon to help with this use case.\n InputLeftElement and InputRightElement to help with\n this use case.\n pointerEvents=\"none\" to{\" \"}\n InputLeftElement or InputRightElement to ensure that clicking on\n them focused the input.\n disabled prop to disable the Input.\n invalid prop to mark the Input as invalid.\n Input base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n label and a visualy hidden input with type set to{\" \"}\n radio.\n Radio components and conveniently pass a few shared style props to each.\n colorScheme prop to change the color of the Radio. You can set the\n value to primary, accent, neutral,{\" \"}\n success, info, warning or danger.\n size prop to change the size of the Radio. You can set the value to{\" \"}\n sm, md or lg.\n variant prop to change the visual style of the Radio. You can set the\n value to outline or filled.\n labelPlacement prop to change the placement of the label. You can set\n the value to start or end.\n disabled prop to disable the Radio.\n invalid prop to mark the Radio as invalid.\n name prop\n name prop to the RadioGroup component,\n instead of passing it to each Radio component. By default, the{\" \"}\n name prop of the RadioGroup takes precedence.\n Radio base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Select component is a component that allows users pick a value from predefined\n options. Ideally, it should be used when there are more than 5 options, otherwise you might\n consider using a radio group instead.\n size prop to change the size of the SelectTrigger. You can\n set the value to xs, sm, md or lg.\n variant prop to change the visual style of the{\" \"}\n SelectTrigger. You can set the value to outline,{\" \"}\n filled or unstyled.\n disabled prop to disable the Select.\n invalid prop to mark the Select as invalid.\n defaultValue prop to make an option selected by default.\n disabled prop on SelectOption to make an option disabled.\n SelectOptGroup and SelectLabel to visualy group options.\n .textContent of the{\" \"}\n SelectOption.\n textValue{\" \"}\n prop on SelectOption to define which text should be used for typeahead\n purposes.\n value and onChange props to control the select.\n multiple prop to allow multi-selection.\n defaultValue prop to make some options\n selected by default.\n value and onChange props uses arrays.\n Select is made up of several components that you can customize to achieve your\n desired design.\n Select and want a simpler API,\n Hope UI exposes the SimpleSelect and SimpleOption components.\n Those are just abstraction over the base Select component.\n Select follow the{\" \"}\n SelectTrigger has role of combobox.\n SelectTrigger has aria-haspopup set to listbox.\n SelectTrigger has aria-controls set to the id of{\" \"}\n SelectListbox.\n SelectTrigger has aria-expanded set to true when\n the listbox is displayed and false otherwise.\n SelectTrigger has aria-activedescendant{\" \"}\n set to the id of the active SelectOption.\n SelectListbox has role of listbox.\n SelectOption has role of option.\n SelectOption has aria-selected set to{\" \"}\n true.\n Select base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Switch component is used as an alternative for the{\" \"}\n label and a visualy hidden input with type set to{\" \"}\n checkbox and role set to switch.\n SwitchPrimitive.\n colorScheme prop to change the color of the Switch. You can set the\n value to primary, accent, neutral,{\" \"}\n success, info, warning or danger.\n size prop to change the size of the Switch. You can set the value to{\" \"}\n sm, md or lg.\n variant prop to change the visual style of the Switch. You can set the\n value to outline or filled.\n labelPlacement prop to change the placement of the label. You can set\n the value to start or end.\n disabled prop to disable the Switch.\n invalid prop to mark the Switch as invalid.\n SwitchPrimitive component to achieve your desired design. You\n can pair it with your styling solution of choice. The below example uses style props and the{\" \"}\n css function.\n Switch base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Switch composes the SwitchPrimitive component, so you can pass all\n its props. These are props specific to the Switch component:\n Textarea component allows you to easily create multi-line text textareas.\n size prop to change the size of the Textarea's text. You can set the\n value to xs, sm, md or lg.\n variant prop to change the visual style of the Textarea. You can set\n the value to outline, filled or unstyled.\n disabled prop to disable the Textarea.\n invalid prop to mark the Textarea as invalid.\n Textarea base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n status prop.\n status prop to change the status of the alert. This affects the color\n scheme and icon used. You can set the value to success, info,{\" \"}\n warning or danger.\n variant prop to change the visual style of the Alert You can set the\n value to solid, subtle, left-accent or{\" \"}\n top-accent.\n Alert ships with smaller components to allow for flexibility in creating all\n kinds of layouts. Here's an example of a custom alert style and layout:\n Alert can also incorporate other Hope UI components. Here's an example of an\n alert with wrapping description text:\n Alert base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n AlertIcon composes Icon and changes the icon based on the{\" \"}\n status prop. You can use the as prop to render a custom icon.\n AlertTitle composes the Box component.\n AlertDescription composes the Box component.\n CircularProgress component is used to indicate the progress for determinate\n and indeterminate processes.\n color prop to change the color of the{\" \"}\n CircularProgressIndicator and the trackColor prop to change the\n color of the progress track (background).\n size prop to change the size of the progress.\n thickness prop to change the thickness of the progress.\n withRoundCaps prop to set the CircularProgressIndicator{\" \"}\n caps rounded.\n CircularProgressLabel{\" \"}\n component. By default it will display the progress percentage.\n indeterminate prop to set the progress in an indeterminate state.\n CircularProgress has a role set to progressbar to\n denote that it is a progress.\n CircularProgress has aria-valuenow set to the percentage\n completion value passed to the component, to ensure the progress percent is visible to\n screen readers.\n CircularProgress base styles and default props can be overridden in the Hope UI\n theme configuration like below:\n status prop.\n NotificationsProvider:\n notificationService anywhere in your application:\n notificationService API\n notificationService object:\n status parameter to change the status of the notification, this affects\n the icon used. You can set the value to success, info,{\" \"}\n warning or danger.\n NotificationsProvider renders notifications with fixed position inside a\n Portal. Position cannot be changed per notification. Use the placement prop to\n define the placement. You can set the value to top-start, top,{\" \"}\n top-end, bottom-start, bottom or{\" \"}\n bottom-end.\n duration parameter to change the duration of the notification. By\n default, notitification will dismiss after 5 seconds.\n persistent parameter to make the notification persistent. the duration\n will be ignored.\n render parameter to display a custom component instead of the default\n Hope UI Notification.\n update method to update a specific notification. This method takes the\n same parameters as the show method except that id is required.\n hide method to dismiss a specific notification by passing its\n notification id.\n NotificationsProvider uses a queue to manage its state. You can limit maximum\n amount of notifications that can be displayed by setting the limit prop.\n clearQueue method to remove all notifications that are not\n currently displayed and the clear method to remove all notifications from state\n and queue.\n Notification base styles and default props can be overridden in the Hope UI\n theme configuration like below:\n show\n update\n update method takes the same parameters as the show method\n except that id is required.\n hide\n Progress is used to display the progress status for a task that takes a long\n time or consists of several steps.\n color prop to change the color of the ProgressIndicator{\" \"}\n and the trackColor prop to change the color of the progress track (background).\n size prop to change the size of the Progress. You can set the value to{\" \"}\n xs, sm, md or lg.\n height prop to manually set a height.\n ProgressLabel component.\n By default it will display the progress percentage.\n striped prop to apply stripes on the ProgressIndicator.\n animated prop to animate the progress stripes.\n indeterminate prop to set the progress in an indeterminate state.\n Progress has a role set to progressbar to denote\n that it is a progress.\n Progress has aria-valuenow set to the percentage completion\n value passed to the component, to ensure the progress percent is visible to screen\n readers.\n Progress base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Skeleton is used to display the loading state of some components.\n startColor and endColor props to change the animation\n color.\n loaded prop to prevent the skeleton from rendering.\n color prop to change the color of the Spinner.\n emptyColor prop to change the background color of the Spinner.\n size prop to change the size of the Button. You can set the value to{\" \"}\n xs, sm, md, lg or xl.\n Spinner base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n colorScheme prop to change the color of the Button. You can set the\n value to primary, accent, neutral,{\" \"}\n success, info, warning or danger.\n size prop to change the size of the Button. You can set the value to{\" \"}\n xs, sm, md, lg or xl.\n compact prop to reduces the Button padding.\n variant prop to change the visual style of the Button. You can set the\n value to solid, subtle, outline, dashed{\" \"}\n or ghost.\n leftIcon and{\" \"}\n rightIcon props respectively.\n leftIcon and rightIcon prop values should be jsx elements\n not strings.\n loading prop to show its loading state. By default, the button will\n show a spinner and leave the button's width unchanged. You can also pass the{\" \"}\n loadingText prop to show a spinner and the loading text.\n loader prop and set it to a custom jsx element.\n loaderText is present, you can change the placement of the loader\n element to either start or end.\n Stack or ButtonGroup component to group buttons.\n When you use the ButtonGroup component, it allows you to:\n variant, colorScheme, size and{\" \"}\n disabled state of all buttons within it.\n spacing between the buttons.\n attached prop.\n role of button.\n Button base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Button component except that it renders only an icon.\n IconButton component accepts most of the props from the Button{\" \"}\n component, so we can use colorScheme prop to change the color of the button.\n Button component, pass the size prop to change the size\n of the button.\n compact prop to reduces the button padding.\n Button component, pass the variant prop to change the\n style of the button.\n loading prop to show its loading state.\n loader prop and set it to a custom jsx element.\n role of button.\n aria-label is required.\n IconButton base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n src pointing\n to the link of the video.\n maxWidth prop to AspectRatio to control the width of the\n content.\n AspectRatio. To make the map\n take up the entire width, we can ignore the maxWidth prop.\n div element.\n as prop.\n Box:\n as prop\n as prop to change the element render, just like\n styled-components.\n width or/and height,\n it'll ensure the child is centered.\n max-width of the content to match the{\" \"}\n min-width of the current breakpoint. This is useful if you’d prefer to design\n for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.\n maxWidth values.\n Container component.\n Container, try resize your browser to see\n it in action.\n auto on\n left and right, you can disabled this behavior by setting the centered prop to{\" \"}\n false.\n centerContent prop to center the content.\n Divider displays a thin horizontal or vertical line, and renders a{\" \"}\n div tag.\n orientation prop and set it to either horizontal or{\" \"}\n vertical.\n variant prop to change the visual style of the divider.\n thickness prop to change the thickness of the divider.\n display: flex and comes with helpful style shorthand. It renders a{\" \"}\n div element.\n Box with display: flex.\n Flex.\n flexDirection is direction.\n flexWrap is wrap.\n Stack, you can combine Flex and{\" \"}\n Spacer to create stackable and responsive layouts.\n Flex and Spacer components, Grid and{\" \"}\n HStack treat children of different widths differently.\n Flex and Spacer, the children will span the entire width of\n the container and also have equal spacing between them.\n Grid, the starting points of the children will be equally spaced but the\n gaps between them will not be equal.\n HStack, the children will have equal spacing between them but they won't\n span the entire width of the container.\n Spacer is to create a navbar with a signup/login button\n aligned to the right.\n display: grid and it comes with helpful style shorthand. It renders a{\" \"}\n div element.\n display: grid.\n Grid to control the span, and\n start positions within the grid.\n Grid component, and\n applying a gap (space) between the grid items.\n colSpan prop to the GridItem{\" \"}\n component to span across columns and also pass the rowSpan component to span\n across rows. You also need to specify the templateColumns and\n templateRows.\n colStart and colEnd prop to GridItem{\" \"}\n component to make an element start or end at the nth grid position.\n Box so you can pass all the Box prop, css grid\n props, and these shorthand prop to save you some time:\n div element with display: grid.\n columns{\" \"}\n prop.\n columns,\n simply pass the minChildWidth prop to specify the min-width a\n child should have before adjusting the layout.\n auto-fit and minmax() internally.\n gap prop to change the row and column spacing between the grid\n items. SimpleGrid also allows you pass columnGap and{\" \"}\n rowGap to define the space between columns and rows respectively.\n columnGap add space on the X axis\n whereas rowGap add space on the Y axis.\n Grid so you can pass all the Grid props and\n css grid props with addition of these:\n gap properties to add spacing between its children\n HStack or{\" \"}\n VStack components. You can also use the Stack component as well\n and pass the direction prop.\n Stack component to change stack direction\n and/or spacing between elements.\n Stack and Flex and use{\" \"}\n justify-content: space-between for more control of the layout.\n a.\n external prop to open the link in a new tab.\n Anchor with a routing library like solid-app-router,\n all you need to do is pass the as prop. It'll replace the rendered{\" \"}\n a tag with the router's Link.\n Anchor base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n currentPage prop to the BreadcrumbLink that matches the\n current path. When this prop is present, the BreadcrumbLink renders a{\" \"}\n span with aria-current set to page instead of an\n anchor element.\n separator prop to change the separator used in the breadcrumb.\n JSX.Element to the separator prop.\n BreadcrumbSeparator component.\n spacing prop to apply left and right margin to each separator.\n Box props to change the style of the breadcrumbs.\n solid-app-router, all you\n need to do is to pass the as prop to the BreadcrumbLink component.\n nav to denote that it is a navigation\n landmark.\n nav has aria-label set to breadcrumb\n .\n BreadcrumbLink with currentPage prop has{\" \"}\n aria-current set to page.\n role set to presentation to denote that its\n for presentation purposes.\n Breadcrumb base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n BreadcrumbItem and BreadcrumbSeparator composes{\" \"}\n Tab components.\n colorScheme prop to change the color of the Tabs. You can set the value\n to primary, accent, neutral, success,{\" \"}\n info, warning or danger.\n size prop to change the size of the Tabs. You can set the value to{\" \"}\n sm, md or lg.\n variant prop to change the visual style of the Tabs. You can set the\n value to underline, outline, cards or{\" \"}\n pills.\n aligment prop to change the alignment of the TabList. You\n can set the value to start, center, apart or{\" \"}\n end.\n orientation prop to change the orientation of the Tabs. You can set the\n value to horizontal or vertical.\n fitted prop to stretch the tab list to fit the container.\n disabled prop to disabled a Tab. When a Tab{\" \"}\n is disabled, it is skipped during keyboard navigation and it is not clickable.\n defaultIndex prop to set a Tab initially active. Indexes\n start at 0.\n keepAlive prop to keep tab panels alive even when there's not visible.\n index and onChange props to control the Tabs{\" \"}\n like form inputs.\n Click the tabs or pull the slider around
\nYeah yeah. What's up?
\nOh, hello there.
\nTabList as role set to tablist.\n TabList as aria-orientation set to horizontal or{\" \"}\n vertical based on the value of the orientation prop.\n Tab as role set to tab.\n Tab as aria-selected set to true when its selected.\n Tab as aria-controls set to the id of its\n associated TabPanel.\n TabPanel as role set to tabpanel.\n TabPanel as aria-labelledby set to the id of the{\" \"}\n Tab that labels it.\n Tabs base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n TabList, TabPanels and TabPanel composes{\" \"}\n Click the tabs or pull the slider around
\nYeah yeah. What's up?
\nOh, hello there.
\nCloseButton is essentially a button with a close icon. It is used to handle the\n close functionality in feedback and overlay components like Alerts, Notifications, Drawers\n and Modals.\n size prop to change the size of the CloseButton. You can set the value\n to sm, md or lg.\n CloseButton base styles and default props can be overridden in the Hope UI\n theme configuration like below:\n Drawer component is a panel that slides out from the edge of the screen. It\n can be useful when you need users to complete a task or view some details without leaving\n the current page.\n placement prop and\n set it to top, right, bottom, or left.\n Some contents...
\nSome contents...
\nSome contents...
\ninitialFocus prop.\n initialFocus prop, the drawer will set focus on the{\" \"}\n first focusable element when it opens.\n size prop if you need to adjust the size of the drawer. Values can be{\" \"}\n xs, sm, md, lg, xl, or{\" \"}\n full.\n form attribute and refer to the id of the form.\n initialFocus prop is passed, the drawer sets focus on the element that\n matches the CSS query selector.\n Drawer base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Drawer composes the{\" \"}\n DrawerOverlay, DrawerContent, DrawerHeader,{\" \"}\n DrawerBody and DrawerFooter composes{\" \"}\n DrawerCloseButton composes{\" \"}\n Some contents...
\nSome contents...
\nSome contents...
\nMenu implement the{\" \"}\n Menu, use a function as children (commonly\n known as a render prop). You'll get access to the internal opened state.\n MenuTrigger can be styled using the usual styled-system props, but\n it starts off plainly styled.\n as prop to render a custom component instead of the default{\" \"}\n MenuTrigger. For instance, you can use Hope UI's Button component,\n or your own custom component.\n MenuItem by passing the icon prop. To add\n a commands (or hotkeys) to menu items, you can use the command prop.\n MenuTrigger or within the MenuContent and you\n type a letter key, a search begins. Focus will move to the first MenuItem that\n starts with the letter you typed.\n MenuItem is too complex or non-textual you can pass the{\" \"}\n textValue prop to MenuItem to indicate the text that will be\n used for typeahead purposes.\n colorScheme prop to change the color of the MenuItem. You\n can set the value to primary, accent, neutral,{\" \"}\n success, info, warning or danger.\n disabled prop to disable a MenuItem.\n onSelect prop to trigger an action when the{\" \"}\n MenuItem is selected.\n MenuGroup and MenuLabel components to group related menu\n items.\n MenuTrigger as role set to button.\n MenuTrigger as aria-haspopup set to menu.\n MenuTrigger as aria-expanded set to true when the\n menu is displayed.\n MenuTrigger as aria-controls set to the id of{\" \"}\n MenuContent.\n MenuContent as role set to menu.\n MenuContent as aria-orientation set to vertical.\n MenuItem as role set to menuitem.\n Menu base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n MenuTrigger, MenuContent, MenuGroup and{\" \"}\n MenuLabel composes{\" \"}\n ModalContent.\n Some contents...
\nblockScrollOnMount to{\" \"}\n false to allow scrolling behind the modal.\n initialFocus prop.\n closeOnOverlayClick to false if you want the modal to stay\n visible.\n Some contents...
\n3.75rem which you can change by\n passing top to the ModalContent. If you need to vertically center\n the modal, pass the centered prop.\n Some contents...
\nModal comes with a scale transition by default but you can change it by\n passing the motionPreset prop, and set its value to either{\" \"}\n fade-in-bottom, scale or none.\n Some contents...
\nscrollBehavior to control how scrolling should happen.\n inside, scroll only occurs within the ModalBody.\n outside, the entire ModalContent will scroll within\n the viewport.\n \n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos blanditiis accusamus\n in praesentium dolorem, sunt quia sit sequi minima maxime? Eius natus, aut omnis\n deserunt nostrum fugiat! Totam magni sapiente maxime maiores aut doloremque veniam\n excepturi, id quae veritatis est omnis, nesciunt ipsum, voluptate adipisci nam sed\n ea inventore facere nulla optio aliquid? Aliquid iure, optio et fuga quo dicta\n ratione impedit praesentium mollitia maiores ipsa, magni sapiente reiciendis\n perspiciatis. Molestiae quisquam eveniet aliquam consequatur accusantium quasi ut\n sint animi reiciendis. Suscipit numquam commodi fuga provident? Voluptatem dicta\n exercitationem nemo beatae cum consequuntur pariatur quidem magni sed tempore. Eaque\n itaque totam quae incidunt quidem officia atque libero placeat? Obcaecati, ullam\n dolores velit sequi magni animi inventore earum error maiores et, sunt numquam illo\n fugiat ducimus in aspernatur possimus minus, placeat blanditiis alias. Deleniti\n corrupti eaque debitis adipisci, doloremque rerum temporibus saepe error! Fugiat\n inventore possimus doloribus, nemo qui, nostrum alias non tempora nam itaque quae\n maiores tempore, quasi blanditiis incidunt aut. Sapiente sit distinctio adipisci.\n Consectetur numquam ratione facere fuga ipsum quasi aliquam velit illum iure\n consequuntur, repellat cumque quibusdam dolorem asperiores perspiciatis ducimus.\n Quod earum alias nihil voluptate inventore dolores mollitia natus saepe esse. Aut\n assumenda nulla maxime recusandae nihil iusto dicta commodi pariatur veritatis?\n Impedit nam deserunt optio aspernatur praesentium totam illum facere id\n exercitationem veniam eveniet vitae obcaecati minima, similique rerum suscipit\n dolorum tempora perferendis voluptatem ex ipsam! Ut ea, sapiente cum, adipisci ab\n voluptatem enim, explicabo illo sunt exercitationem ipsum doloribus? Consectetur\n impedit voluptatibus culpa aperiam facere, animi placeat ea corrupti quidem\n repellendus sed saepe accusamus autem delectus enim, in soluta minus laboriosam\n adipisci! Numquam quod dolorem eum tempora totam, assumenda nostrum eligendi aliquam\n rerum dignissimos autem quo. Qui fugit, aperiam sequi quis exercitationem quisquam\n nobis facilis debitis placeat quia temporibus distinctio maiores animi nisi\n voluptatum accusamus laudantium non dolore? Dolorem eum vitae modi ipsam quibusdam\n tempora natus obcaecati in, expedita fugit. Explicabo quae accusantium porro unde\n dolores maxime ullam optio enim quibusdam fugit veritatis excepturi ad, molestias\n natus tenetur esse rerum et ab rem cupiditate, dicta aspernatur corrupti deleniti\n iste. Aspernatur repellendus, voluptates omnis, hic quod minima laudantium officiis\n aliquam quasi voluptatibus voluptatum provident soluta suscipit ea illum amet fugit\n blanditiis velit exercitationem assumenda inventore rerum nihil! Inventore\n reprehenderit distinctio non veniam eum beatae nihil reiciendis nemo est molestias\n qui, dolorum praesentium explicabo id culpa nostrum repudiandae recusandae! Vero ut\n placeat, fugiat, aliquam quos omnis similique temporibus iusto nulla non rerum\n repellat repudiandae illum sit sapiente. Iusto et qui eaque odit eum culpa ipsa,\n libero, perspiciatis voluptatem quaerat aperiam assumenda. Architecto minus\n doloremque sed numquam aperiam, ratione dolorem dolores odio obcaecati quis nemo sit\n delectus voluptatum possimus ad maxime et officia minima nulla illum eum quos\n molestiae laboriosam. Nihil harum voluptates, ea consequatur tenetur, nulla\n explicabo fugiat earum veritatis doloribus maxime deleniti nostrum quos praesentium\n voluptate commodi quas assumenda fuga et placeat? Quam repudiandae, tempore\n consequuntur aperiam itaque in omnis et ut unde, temporibus alias maiores\n distinctio, nihil culpa. Fugiat quasi quisquam eaque facilis totam.\n
\nsize prop if you need to adjust the size of the modal. Values can be{\" \"}\n xs, sm, md, lg, xl...8xl,\n or full.\n Some contents...
\ntrapFocus and set its value to{\" \"}\n false.\n $blackAlpha11, but if you want\n to achieve a different style you can use style props.\n Some contents...
\nbackdrop-filter CSS\n property, used in the example above.\n ModalContent has aria-modal set to true.\n ModalContent has aria-labelledby set to the id{\" \"}\n of the ModalHeader.\n ModalContent has aria-describedby set to the id{\" \"}\n of the ModalBody.\n initialFocus.\n document.body to\n break it out of the source order.\n Modal base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n ModalOverlay, ModalContent, ModalHeader,{\" \"}\n ModalBody and ModalFooter composes{\" \"}\n ModalCloseButton composes{\" \"}\n Some contents...
\nSome contents...
\nSome contents...
\nSome contents...
\nLorem ipsum...
\nSome contents...
\nSome contents...
\nPopoverTrigger renders an unstyled button by default. For\n accessiblity reason, when using the as prop ensure the element passed in is\n focusable.\n PopoverContent.\n triggerMode prop to change the way of opening the popover. You can set\n the value to hover or click.\n PopoverContent when it opens. Use the{\" \"}\n initialFocus prop to send focus to a specific element instead.\n trapFocus prop to lock focus inside the PopoverContent.\n placement prop to set the preferred popover placement. You can set the\n value to top, right, left, bottom and\n their -start or -end variants.\n PopoverAnchor component if you want to use a different element for the\n popover positioning reference.\n Button is the trigger that opens/closes the popover\n and the Input is the reference element that the popover will position relative\n to.\n opened state and an{\" \"}\n onClose method that you can access via a render prop.\n opened and onClose props to control the opening and\n closing of the popover.\n Popover is made up of several components that you can customize to achieve your\n desired design.\n PopoverTrigger has aria-haspopup set to dialog to\n denote that it triggers a popover.\n PopoverTrigger has aria-controls set to the id of\n the PopoverContent.\n PopoverTrigger has aria-expanded set to true or{\" \"}\n false depending on the open/closed state of the popover.\n PopoverContent has aria-labelledby set to the id of\n the PopoverHeader.\n PopoverContent has aria-describedby set to the id{\" \"}\n of the PopoverBody.\n triggerMode is set to hover,{\" \"}\n PopoverContent has role set to tooltip, otherwise{\" \"}\n role is set to dialog.\n triggerMode prop is set to click, clicking the{\" \"}\n PopoverTrigger or pressing space or enter when focus is\n on the trigger will open the popover.\n triggerMode prop is set to hover, focusing on or\n mousing over the PopoverTrigger will open the popover.\n initialFocus prop is set, focus is moved to the matching element,\n otherwise focus moves to the PopoverContent.\n triggerMode prop is set to click, clicking the{\" \"}\n PopoverTrigger closes the popover.\n triggerMode prop is set to hover, blurring or mousing\n out of the PopoverTrigger will close the popover. If you move your mouse into\n the PopoverContent, it'll remain visible.\n PopoverContent and closeOnEsc prop is\n set to true, pressing esc closes the popover.\n closeOnBur prop is set to true, clicking outside or\n blurring out of the PopoverContent closes the popover.\n Popover base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n PopoverContent, PopoverArrow, PopoverHeader,{\" \"}\n PopoverBody and PopoverFooter composes{\" \"}\n PopoverCloseButton composes{\" \"}\n Tooltip component follows the{\" \"}\n withArrow prop to add an arrow to the tooltip.\n disabled prop to prevent the tooltip from showing up.\n placement prop you can adjust where your tooltip will be displayed.\n Tooltip base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Heading composes{\" \"}\n h2 tag by default.\n h tag pass the level prop with a value from\n 1 to 6. For example, level 3 will render an h3. Use{\" \"}\n Inspect Element to see the element that gets rendered in html.\n level prop is primarily for semantic purpose as it does not alter the\n heading styles\n size prop. It apply a\n combination of fontSize and lineHeight for an optimal reading\n experience.\n noOfLines prop and set it to the desired number of lines. It will render an\n ellipsis when the text exceeds the width of the viewport or maxWidth prop.\n fontSize prop.\n Heading base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n Text component is the used to render text and paragraphs within an interface.\n It renders a p tag by default.\n size prop. It apply a\n combination of fontSize and lineHeight for an optimal reading\n experience.\n noOfLines prop and set it to the desired number of lines. It will render an\n ellipsis when the text exceeds the width of the viewport or maxWidth prop.\n fontSize prop.\n as prop. Use{\" \"}\n Inspect Element to see the element that gets rendered in html.\n Text base styles and default props can be overridden in the Hope UI theme\n configuration like below:\n css function\n css function from @stitches/core configured\n with the Hope UI theme.\n css prop\n css you can provide any valid CSS to an element and utilize tokens from\n your theme to ensure consistency and that you are utilizing constraint-based design\n principles when styling your application.\n css prop is considered an escape hatch, there are few cases where\n it is needed.\n css prop and pass it whatever CSS property you desire.\n filter property:\n css prop as well:\n & operator like in sass.\n css prop you can target other Hope UI components using string\n interpolation in the selector.\n css prop you can target other SolidJS components using string\n interpolation in the selector.\n globalCss function\n globalCss function from @stitches/core.\n hope.<element> notation. For example, if you want a plain html button\n with ability to pass Hope UI styles, you can write <hope.button />.\n Link component of the solid-app-router package, let's\n use the hope factory function to make possible to pass style props to it.\n stitches under the hood, ensure the non-hope\n component accepts class as props for this to work correctly\n css() method or Hope UI css{\" \"}\n prop, if you want to target all p in the Card component you can\n use the css selector {\"${Card} p\"} and it will evaluate to{\" \"}\n {\".my-card p\"}. If you want to learn more, check out \"Targeting other SolidJS\n components\" in the{\" \"}\n @media queries and adding nested styles throughout your code, Hope UI allows\n you to use an object syntax to add mobile-first responsive styles.\n @media(min-width) media query to ensure your interfaces are\n mobile-first.\n | Name | \nValue | \n
|---|---|
| {breakpoint.name} | \n{breakpoint.value} | \n
createStitches call which occurs\n internally in Hope UI, for this reason it is currently not possible to customize\n breakpoint values.\n Box with the following properties:\n css prop\n css prop you don't need the{\" \"}\n @initial breakpoint. It's like the normal way of creating mobile-first\n responsive styles in CSS.\n css function\n css function support responsive\n styles.\n * will only work if you use the Flex or{\" \"}\n Stack components.\n * will only work if you use the Grid and{\" \"}\n GridItem components.\n as prop\n as prop to\n change the rendered element.\n Button component, and you need to make it a\n link instead. You can compose a and Button like this:\n as prop.\n HopeProvider at the root of\n your application. This can be either in your index.jsx or{\" \"}\n index.tsx\n theme from @hope-ui/solid.\n config prop that deep merges the default theme with\n your customizations.\n localStorage and appends a className to the{\" \"}\n body to ensure the color mode is persistent.\n light. To set the initial color mode\n your application should start with, create a theme config, set the{\" \"}\n initialColorMode to either light, dark or{\" \"}\n system and pass the config to the HopeProvider.\n system as initial color mode, the theme will change with the\n system preference. However, if another theme is manually selected by the user then that\n theme will be used on the next page load. To reset it to system preference, simply remove\n the hope-ui-color-mode entry from localStorage.\n useColorMode and{\" \"}\n useColorModeValue hooks.\n useColorMode is a custom hook that gives you an accessor to get the current\n color mode, and a function to toggle it.\n toggleColorMode anywhere in your app tree toggles the color mode from\n light or dark and vice versa.\n useColorModeValue is a custom hook used to change any value or style based on\n the color mode. It takes 2 arguments: the value in light mode, the value in dark mode and\n returns a derived signal with the correct value based on the color mode.\n background-color and color{\" \"}\n using the useColorModeValue hook.\n hope prefix.\n #root div{\" \"}\n background-color using a color from the Hope UI theme. In a plain CSS file you\n can do it like this:\n appBg token representing your application{\" \"}\n background-color which is white in light mode and refers to Hope\n UI neutral3 color token in dark mode:\n components option in it's theme configuration allowing you\n to globally set base style and default props for each Hope UI components.\n Button to have a \"pill shape\", be uppercased and apply\n the subtle variant and success colorScheme by default, here's what\n you'll do:\n Alert component.\n css function are mapped\n to a scale from the Hope UI theme. The list of CSS property / theme token mapping is\n available on the{\" \"}\n $ sign.\n colors key allows you to customize the color palettes for your project.\n primary, switching to dark mode will show the proper hex values from the\n dark palette.\n fonts (font families)\n fontSizes\n fontWeights\n lineHeights\n letterSpacings\n space key allows you to customize the global spacing scale for your\n project.\n 0_5 actually means 0.5, unfortunately stitches doesn't allow\n dots in theme token names.\n sizes key allows you to customize the global sizing of components you build\n for your project.\n radii key allows you\n to customize the global radii scale for your project.\n shadows key allows you to\n customize the global shadow scale for your project.\n