For detailed documentation and usage examples, visit our website:

Ascend UI Components Documentation

To install the Ascend UI Components Library, you can use npm or yarn:

npm install @ascendui/react
# or
yarn add @ascendui/react

To begin using Ascend UI Components in your project, follow these steps:

1. Integrating with Tailwind CSS:

   Ensure that Ascend UI Components are included in your Tailwind CSS configuration. Add the following lines to your tailwind.config.js file:

   module.exports = {
     content: [
       "./node_modules/@ascendui/react/**/*.{js,jsx,ts,tsx}",
       // Add other content paths as needed
     ],
     // Other Tailwind CSS configuration...
   };

2. Wrap your Application in the Provider:

   Wrap your application with the Provider component provided by Ascend UI Components:

   import { Provider } from "@ascendui/react";
   
   const App = ({ children }) => (
     <Provider>
       {children}
     </Provider>
   );

3. Start Using Components:

   You can now import and use components directly in your application:

   import React from "react";
   import { Button, Range, Ripple, Spinner, Switch, Tooltip, useBrowser, useSWR } from "@ascendui/react";
   
   const MyComponent = () => {
     const browser = useBrowser();
   
     return (
       <div>
         <p>You are using {browser} browser.</p>
         <Button>Click Me</Button>
         <Range min={0} max={100} value={50} />
         <Ripple as="button">Click Me</Ripple>
         <Spinner />
         <Switch value={true} />
         <Tooltip content="Tooltip Content">Hover Me</Tooltip>
       </div>
     );
   };
   
   export default MyComponent;

• Accordion
• Button
• CodeMockup
• ContextMenu
• Dropdown
• Highlight
• Hover
• HoverCard
• Modal
• Pointer
• Range
• Ripple
• Spinner
• Switch
• Tabs
• Tooltip

• useSWR
• useBrowser
• useToast

Feel free to explore and utilize the various components and hooks provided by Ascend UI Components to enhance your UI development experience. If you have any questions or need further assistance, refer to our documentation or reach out to our support team. Happy coding! 🎉