Radian

https://radianos.com/docs
Admin
Radian is a high-quality, flexible, and open-source design and development library built with React,...
Tokens:23,822
Snippets:200
Trust Score:4.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize New Next.js Project with Radian CLI

Source: https://context7.com/context7/radianos/llms.txt

Creates a new Next.js project pre-configured with the Radian UI library using the command-line interface. It guides the user through project setup prompts.

```bash
pnpm dlx @radianos/radianbeta init

# CLI prompts and setup
✔ No package.json found. Create a new project? … yes
✔ What would you like to name your project? … my-app
✔ Which framework do you want to use? › Next.js
✔ Would you like to use /src directory? … yes
✔ Creating next project...
✔ Writing components.json file
✔ Setting up project configuration
✔ Installing dependencies

# Success! Project initialization completed. You may now add components.
```

--------------------------------

### Configure Radian Theme with CLI and Next.js

Source: https://context7.com/context7/radianos/llms.txt

Demonstrates how to initialize Radian theme configuration using the CLI and integrate it into a Next.js application. Includes `components.json` example and basic dark mode setup in the HTML root.

```json
// Radian automatically configures theme support with CLI initialization

// After running: pnpm dlx @radianos/radianbeta init

// components.json is created with theme configuration
{
  "name": "my-app",
  "framework": "next",
  "theme": {
    "dark": true,
    "light": true
  },
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css"
  }
}
```

```tsx
// Dark mode is configured via Tailwind CSS
// Add to your root layout or _app file:
<html className="dark">
  <body>{children}</body>
</html>
```

```tsx
// Toggle theme programmatically
import { useTheme } from 'next-themes'

function ThemeToggle() {
  const { theme, setTheme } = useTheme()

  return (
    <Button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      Toggle Theme
    </Button>
  )
}

// Components automatically adapt to theme
<Button>Works in light and dark mode</Button>
<Input placeholder="Themed input" />
<Modal>Themed modal</Modal>
```

--------------------------------

### Run Radian Initialization in Existing Vite Project

Source: https://context7.com/context7/radianos/llms.txt

Executes the Radian CLI initialization command within an existing Vite project to verify and complete the setup, including dependency installation and configuration checks.

```bash
# Run initialization
pnpm dlx @radianos/radianbeta init

✔ Before init checks completed
✔ Detecting framework. Detected Vite.
✔ Verifying tailwind configuration. Found Tailwind configuration.
✔ Verifying import alias. Found import alias prefix: @
✅ Preflight checks passed
✔ Writing components.json file
✔ Project configuration completed
✔ Installing dependencies
```

--------------------------------

### Install Tailwind CSS for Existing Vite Project

Source: https://radianos.com/docs/installation/vite

Install Tailwind CSS and its Vite plugin for an existing project. This is a prerequisite for using Radianos components effectively with styling.

```bash
pnpm add tailwindcss @tailwindcss/vite
```

--------------------------------

### Setup Radian in Existing Vite Project - Dependencies

Source: https://context7.com/context7/radianos/llms.txt

Installs necessary dependencies for integrating Radian into an existing Vite project, specifically Tailwind CSS and path resolution types.

```bash
# Install TailwindCSS
pnpm add tailwindcss @tailwindcss/vite

# Install path resolution
pnpm add -D @types/node
```

--------------------------------

### Alert Component Installation

Source: https://radianos.com/docs/components/alert

Instructions for installing the Alert component using various package managers.

```bash
pnpm install
pnpm install
yarn
bun
```

--------------------------------

### Modal Component Examples (React)

Source: https://context7.com/context7/radianos/llms.txt

Showcases the Modal component from Radianos UI, illustrating basic usage, a delete confirmation modal, an integration example with form inputs, and a modal with a transparent backdrop. Includes installation instructions and a comprehensive list of props for Modal, ModalTrigger, ModalClose, and other related components.

```tsx
// Installation
// pnpm dlx @radianos/radianbeta add modal

import {
  Modal,
  ModalClose,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger,
  ModalBody
} from "@/components/ui/modal"

// Basic modal
<Modal>
  <ModalTrigger asChild>
    <button className="px-4 py-2 bg-blue-500 text-white rounded">
      Open Modal
    </button>
  </ModalTrigger>

  <ModalContent>
    <ModalHeader>
      <ModalTitle>My Modal</ModalTitle>
      <ModalClose />
    </ModalHeader>

    <ModalBody>
      <p>This is a simple modal body content.</p>
    </ModalBody>

    <ModalFooter>
      <button className="px-3 py-1 bg-gray-200 rounded">Cancel</button>
      <button className="px-3 py-1 bg-blue-500 text-white rounded">Confirm</button>
    </ModalFooter>
  </ModalContent>
</Modal>

// Delete confirmation modal
<Modal closeIcon="visible" backdrop="blur">
  <ModalTrigger asChild>
    <Button variant="outline" color="error">Delete</Button>
  </ModalTrigger>

  <ModalContent>
    <ModalHeader>
      <ModalTitle>Delete Item</ModalTitle>
      <ModalDescription>
        This action cannot be undone. Are you sure you want to delete this item?
      </ModalDescription>
    </ModalHeader>

    <ModalFooter>
      <ModalClose asChild>
        <Button variant="ghost">Cancel</Button>
      </ModalClose>
      <Button variant="strong" color="error">
        Delete
      </Button>
    </ModalFooter>
  </ModalContent>
</Modal>

// Integration modal example
<Modal closeIcon="hover" backdrop="overlay">
  <ModalTrigger asChild>
    <Button>Integrate Now</Button>
  </ModalTrigger>

  <ModalContent>
    <ModalHeader>
      <ModalTitle>Connect GitHub</ModalTitle>
      <ModalDescription>
        Connect your GitHub account to sync repositories
      </ModalDescription>
    </ModalHeader>

    <ModalBody>
      <Input
        label="Repository URL"
        placeholder="https://github.com/username/repo"
      />
    </ModalBody>

    <ModalFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Connect</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

// Modal with transparent backdrop
<Modal backdrop="transparent">
  <ModalTrigger asChild>
    <Button>Open</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>Transparent Backdrop</ModalTitle>
    </ModalHeader>
    <ModalBody>Content here</ModalBody>
  </ModalContent>
</Modal>

// Props:
// <Modal>
// - closeIcon: "hidden" | "visible" | "hover" (default: "hidden")
// - backdrop: "overlay" | "blur" | "transparent" (default: "overlay")
//
// <ModalTrigger>
// - asChild: boolean (default: false)
//
// <ModalClose>
// - asChild: boolean (default: false)

```

--------------------------------

### Install Radianos Tooltip with pnpm

Source: https://radianos.com/docs/components/tooltip

Provides instructions for installing the Radianos Tooltip component using pnpm. This is a command-line installation process.

```bash
pnpm dlx @radianos/radianbeta add tooltip
```

--------------------------------

### Install Radianos Resizable Component

Source: https://radianos.com/docs/components/resizable

Instructions for installing the resizable component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx @radianos/radianbeta add resizable
```

--------------------------------

### Install Node Types for Vite Configuration

Source: https://radianos.com/docs/installation/vite

Install the types for Node.js as a development dependency. This is often required for advanced configurations in Vite projects, especially when using path modules.

```bash
pnpm add -D @types/node
```

--------------------------------

### Accordion Component Examples (React)

Source: https://context7.com/context7/radianos/llms.txt

Demonstrates the usage of the Accordion component from Radianos UI, showing single and multiple interaction modes, different variants, and size options. Includes installation instructions and a breakdown of available props for Accordion, AccordionItem, AccordionTrigger, and AccordionContent.

```tsx
// Installation
// pnpm dlx @radianos/radianbeta add accordion

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "@/components/ui/accordion"

// Single interaction accordion
<Accordion size="sm" variant="box" interaction="single" className="max-w-md mx-auto">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Radian?</AccordionTrigger>
    <AccordionContent>
      <p>Radian is an open-source React component library and UI design system.</p>
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="item-2">
    <AccordionTrigger>How can Radian speed up development?</AccordionTrigger>
    <AccordionContent>
      <p>Radian provides pre-built components with beautiful defaults that you can customize.</p>
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="item-3" disabled>
    <AccordionTrigger>Is Radian suitable for all skill levels?</AccordionTrigger>
    <AccordionContent>
      <p>Yes, Radian is designed to be beginner-friendly while powerful for experts.</p>
    </AccordionContent>
  </AccordionItem>
</Accordion>

// Multiple interaction accordion
<Accordion interaction="multiple" variant="table">
  <AccordionItem value="faq-1">
    <AccordionTrigger>Question 1</AccordionTrigger>
    <AccordionContent>Answer 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="faq-2">
    <AccordionTrigger>Question 2</AccordionTrigger>
    <AccordionContent>Answer 2</AccordionContent>
  </AccordionItem>
</Accordion>

// Large size with open variant
<Accordion size="lg" variant="open">
  <AccordionItem value="section-1">
    <AccordionTrigger>Section Title</AccordionTrigger>
    <AccordionContent>Section content here</AccordionContent>
  </AccordionItem>
</Accordion>

// Props:
// <Accordion>
// - size: "sm" | "lg" (default: "sm")
// - variant: "box" | "table" | "open" (default: "box")
// - interaction: "single" | "multiple" (default: "single")
// - disabled: boolean (default: false)
//
// <AccordionItem>
// - value: string (required)
// - disabled: boolean (default: false)
//
// <AccordionTrigger>
// - asChild: boolean (default: false)
//
// <AccordionContent>
// - asChild: boolean (default: false)

```

--------------------------------

### Install Radianos Badge Component (pnpm)

Source: https://radianos.com/docs/components/badge

Instructions for installing the Radianos Badge component using pnpm.

```shell
pnpm dlx @radianos/radianbeta add badge
```

--------------------------------

### Install Radianos Input Component using pnpm

Source: https://radianos.com/docs/components/inputs

This command installs the Radianos Input component using pnpm, a performant package manager. Ensure you have pnpm installed globally. This is the primary method for adding the component to your project.

```bash
pnpm dlx @radianos/radianbeta add input
```

--------------------------------

### Install Radianos Select Component

Source: https://radianos.com/docs/components/select

Instructions for installing the Radianos Select component using various package managers. This command adds the necessary package to your project dependencies.

```bash
pnpm dlx @radianos/radianbeta add select
```

--------------------------------

### Install Radianos Drawer Component

Source: https://radianos.com/docs/components/drawer

Instructions for installing the Radianos Drawer component using pnpm. This command ensures the latest version of the drawer is added to your project.

```bash
pnpm dlx @radianos/radianbeta add drawer
```

--------------------------------

### Install Password Component using PNPM

Source: https://radianos.com/docs/components/password

Installs the Password component using PNPM. This command adds the component to your project, making it available for use.

```bash
pnpm dlx @radianos/radianbeta add password
```

--------------------------------

### Configure components.json for Next.js Project

Source: https://radianos.com/docs/installation/next

This interactive setup process configures the `components.json` file for a new Next.js project. It includes prompts for project name, framework selection (Next.js), and usage of the `/src` directory.

```bash
✔ No package.json found at /home/ashmitbastola/Desktop/Personal/next. Create a new project? … yes
✔ What would you like to name your project? … my-app
✔ Which framework do you want to use? › Next.js
✔ Would you like to use /src directory? … yes
✔ Creating next project...
✔ Writing components.json file
⠋ Setting up project configuration✅ Next.js project setup completed
✔ Setting up project configuration
✔ Installing dependencies

Success! Project initialization completed. You may now add components.
```

--------------------------------

### Install Currency Amount Component

Source: https://radianos.com/docs/components/currency-amount

Installs the currency-amount package using pnpm. This is a prerequisite for using the component in your project.

```bash
pnpm dlx @radianos/radianbeta add currency-amount
```

--------------------------------

### Import and Use Radianos Button Component in Next.js

Source: https://radianos.com/docs/installation/next

Demonstrates how to import and use the 'Button' component from Radianos within a Next.js application. The example shows basic usage with configurable props like `variant`, `size`, `rounded`, and `iconOnly`.

```typescript
import {Button} from "@/components/ui/Button"

export default function App() {
return (
  <div>
      <Button variant="strong" size="base" rounded="rounded" iconOnly={false}/>
          Button
      </Button>         
  </div>
)
}
```

--------------------------------

### Install Progress Bar with pnpm

Source: https://radianos.com/docs/components/progress-bar

Instructions for installing the progress bar component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx @radianos/radianbeta add progress-bar
```

--------------------------------

### Install Tailwind CSS Dependencies (pnpm)

Source: https://radianos.com/docs/installation/manual

Installs essential Tailwind CSS related packages using pnpm. These include animate, class-variance-authority, clsx, tailwind-merge, and lucide-react.

```shell
pnpm add tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
```

--------------------------------

### Radianos Form Component Installation and Usage (TypeScript/React)

Source: https://context7.com/context7/radianos/llms.txt

This snippet shows how to install the Radianos form component using pnpm and provides examples of its usage in a React application with TypeScript. It includes imports for various UI elements like Input, Button, Checkbox, Select, and TextArea. The examples demonstrate creating registration, contact, and checkout forms.

```tsx
// Installation
// pnpm dlx @radianos/radianbeta add form

import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Select } from "@/components/ui/select"
import { TextArea } from "@/components/ui/textarea"

// Registration form example
<form className="space-y-6 max-w-md">
  <div>
    <h1 className="text-2xl font-bold">Create Your Account</h1>
    <p className="text-neutral-500">Join us today and get started with your journey</p>
  </div>

  <Input
    label="Full Name *"
    placeholder="Enter your full name"
    required
  />

  <Input
    type="email"
    label="Email Address *"
    placeholder="your@email.com"
    required
  />

  <Input
    label="Username *"
    placeholder="Choose a username"
    required
  />

  <Input
    type="tel"
    label="Phone Number"
    placeholder="+1 (555) 000-0000"
    lead="+247"
  />

  <Input
    type="password"
    label="Password"
    placeholder="Enter password"
    required
  />

  <Input
    type="password"
    label="Confirm Password"
    placeholder="Re-enter password"
    required
  />

  <Checkbox label="Accept Terms & Conditions" />

  <Button type="submit" className="w-full">
    Submit All Fields
  </Button>
</form>

// Contact form example
<form className="space-y-4 max-w-lg">
  <div>
    <h2 className="text-xl font-bold">Get In Touch</h2>
    <p className="text-sm text-neutral-600">
      Send us a message and we'll respond as soon as possible.
    </p>
  </div>

  <Input
    label="Full Name *"
    placeholder="Your name"
    required
  />

  <Input
    type="email"
    label="Email Address *"
    placeholder="your@email.com"
    required
  />

  <Input
    label="Subject *"
    placeholder="What is this about?"
    required
  />

  <TextArea
    label="Message *"
    placeholder="Your message..."
    hint="0/1000 characters"
    rows={6}
    required
  />

  <Button type="submit" className="w-full">
    Send Message
  </Button>
</form>

// Checkout form example
<form className="space-y-6">
  <div>
    <h1 className="text-2xl font-bold">Secure Checkout</h1>
    <p className="text-neutral-500">Complete your order with our secure payment system</p>
  </div>

  <section>
    <h3 className="font-semibold mb-3">Contact Information</h3>
    <div className="space-y-3">
      <Input label="Full Name *" required />
      <Input type="email" label="Email Address *" required />
    </div>
  </section>

  <section>
    <h3 className="font-semibold mb-3">Shipping Address</h3>
    <div className="space-y-3">
      <Input label="Street Address *" required />
      <div className="grid grid-cols-2 gap-3">
        <Input label="City *" required />
        <Input label="State *" required />
      </div>
      <Input label="ZIP Code *" required />
    </div>
  </section>

  <section>
    <h3 className="font-semibold mb-3">Billing Address</h3>
    <Checkbox label="Same as shipping address" className="mb-3" />
    <div className="space-y-3">
      <Input label="Street Address *" required />
      <div className="grid grid-cols-2 gap-3">
        <Input label="City *" required />
        <Input label="State *" required />
      </div>
      <Input label="ZIP Code *" required />
    </div>
  </section>

  <section>
    <h3 className="font-semibold mb-3">Payment Information</h3>
    <div className="space-y-3">
      <Input
        label="Card Number *"
        placeholder="1234 5678 9012 3456"
        required
      />
      <div className="grid grid-cols-2 gap-3">
        <Input label="Expiration Date *" placeholder="MM/YY" required />
        <Input label="CVV *" placeholder="123" required />
      </div>
    </div>
  </section>

  <Input
    label="Promo Code (optional)"
    placeholder="Enter code"
  />

  <Button type="submit" size={44} className="w-full">
    Place Order / Pay Now
  </Button>
</form>
```

--------------------------------

### Install Radianos Toast Component

Source: https://radianos.com/docs/components/toast

Instructions for installing the Radianos Toast component using pnpm. This command-line interface (CLI) command adds the necessary package to your project.

```bash
pnpm dlx @radianos/radianbeta add toast
```

--------------------------------

### Install Radianos Skeleton Component

Source: https://radianos.com/docs/components/skeleton

Installs the Skeleton component using pnpm. This command adds the necessary package to your project, enabling the use of skeleton placeholders for loading states.

```bash
pnpm dlx @radianos/radianbeta add skeleton
```

--------------------------------

### Install Radian UI Accordion Component

Source: https://radianos.com/docs/components/accordion

Instructions for installing the Radian UI Accordion component using various package managers like pnpm, npm, yarn, and bun.

```bash
pnpm add @radix-ui/react-accordion
npm install @radix-ui/react-accordion
yarn add @radix-ui/react-accordion
bun add @radix-ui/react-accordion
```

--------------------------------

### Install Draggable Component (pnpm)

Source: https://radianos.com/docs/animations/draggable

This command installs the Draggable component using pnpm. Ensure you have pnpm installed and configured in your project.

```bash
pnpm dlx @radianos/radianbeta add draggable
```

--------------------------------

### Usage Example for Progress Bar Component (JSX)

Source: https://radianos.com/docs/components/progress-bar

A basic example of how to use the ProgressBar component in JSX. It shows how to set the label and value, and enable the value label.

```jsx
<ProgressBar label="Loading..." value={50} valueLabel />
```

--------------------------------

### Basic Console Log Example

Source: https://radianos.com/docs/components/code-area

A simple JavaScript code snippet that logs 'Hello, World!' to the console. This demonstrates basic JavaScript execution.

```javascript
console.log("Hello, World!")
```

--------------------------------

### Initialize New Vite Project with Radian CLI

Source: https://context7.com/context7/radianos/llms.txt

Sets up a new Vite project with the Radian UI library via the CLI. This process includes project naming, framework selection, and dependency installation.

```bash
pnpm dlx @radianos/radianbeta init

# CLI prompts and setup
✔ No package.json found. Create a new project? … yes
✔ What would you like to name your project? … my-app
✔ Which framework do you want to use? › Vite
✔ Creating vite project...
✔ Writing components.json file
✔ Setting up project configuration
✔ Installing dependencies

# Add components to your project
pnpm dlx @radianos/radianbeta add button
pnpm dlx @radianos/radianbeta add input
pnpm dlx @radianos/radianbeta add modal
```

--------------------------------

### Install Color Picker using pnpm

Source: https://radianos.com/docs/components/color-picker

Instructions for installing the color-picker package using pnpm. This command uses `dlx` to execute a package directly.

```bash
pnpm dlx @radianos/radianbeta add color-picker
```

--------------------------------

### Initialize Radianos Project with CLI

Source: https://radianos.com/docs/getting-started/cli

Initializes a new Radianos project by installing dependencies, configuring tailwind.config.js, and setting up CSS variables. This command prompts the user for project configuration details.

```shell
pnpm dlx @radianos/radianbeta init
```

--------------------------------

### Install Radianos Popover with pnpm

Source: https://radianos.com/docs/components/popover

This command installs the Radianos Popover component using pnpm. Ensure you have pnpm installed to use this command.

```bash
pnpm dlx @radianos/radianbeta add popover
```

--------------------------------

### Install Radianos Dropdown CLI

Source: https://radianos.com/docs/components/dropdown

Instructions for installing the Radianos Dropdown component using pnpm, my, yarn, or bun via the command line interface. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx @radianos/radianbeta add dropdown
```

--------------------------------

### Install Radianos Switch Component

Source: https://radianos.com/docs/components/switch

Installs the Radianos Switch component using pnpm. This command ensures the necessary package is added to your project's dependencies.

```bash
pnpm dlx @radianos/radianbeta add switch
```

--------------------------------

### Install Tabs Component with pnpm

Source: https://radianos.com/docs/components/tabs

Installs the Tabs component using the pnpm package manager. This is the primary method for adding the component to your project.

```bash
pnpm dlx @radianos/radianbeta add tabs
```

--------------------------------

### Install Radianos Avatar Component using pnpm

Source: https://radianos.com/docs/components/avatar

This command installs the Radianos Avatar component using pnpm. Ensure you have pnpm installed and configured in your project to use this command.

```bash
pnpm dlx @radianos/radianbeta add avatar
```

--------------------------------

### Install Radianos Modal Component

Source: https://radianos.com/docs/components/modal

Instructions for installing the Radianos Modal component using pnpm. This command integrates the modal package into your project, making it available for use.

```bash
pnpm dlx @radianos/radianbeta add modal
```

--------------------------------

### Install Radianos Time Picker using pnpm

Source: https://radianos.com/docs/components/time-picker

This command installs the Radianos Time Picker component using the pnpm package manager.

```bash
pnpm dlx @radianos/radianbeta add time-picker
```

--------------------------------

### Install Radianos Spinner Component

Source: https://radianos.com/docs/components/spinner

Command to install the Radianos UI Spinner component using pnpm. This command adds the spinner package to your project.

```bash
pnpm dlx @radianos/radianbeta add spinner
```

--------------------------------

### Install Radianos Search Component using pnpm

Source: https://radianos.com/docs/components/search

This snippet shows how to install the Radianos Search component using the pnpm package manager. It utilizes the `dlx` command to execute the add command.

```bash
pnpm dlx @radianos/radianbeta add search
```

--------------------------------

### Install ChangingText Component (pnpm)

Source: https://radianos.com/docs/animations/changing-text

Installs the ChangingText component using pnpm. This command is used to add the component to your project.

```bash
pnpm dlx @radianos/radianbeta add changing-text
```

--------------------------------

### Install Border Beam Animation

Source: https://radianos.com/docs/animations/border-beam

Provides commands for installing the Border Beam animation using various package managers like npm, pnpm, yarn, and bun.

```bash
npm install @radianos/animated-border-beam
pnpm install @radianos/animated-border-beam
yarn add @radianos/animated-border-beam
bun add @radianos/animated-border-beam
```

--------------------------------

### Install Radianos Banner Component

Source: https://radianos.com/docs/components/banner

Installs the Radianos Banner component using pnpm. This command downloads and adds the necessary package to your project dependencies.

```bash
pnpm dlx @radianos/radianbeta add banner
```

--------------------------------

### Install Gradient Text Component (pnpm)

Source: https://radianos.com/docs/animations/gradient-text

Provides the command to install the gradient-text package using pnpm. This is the primary method for adding the component to your project.

```bash
pnpm dlx @radianos/radianbeta add gradient-text
```

--------------------------------

### Install React Toastify Package - pnpm

Source: https://radianos.com/docs/components/code-area

Installs the 'react-toastify' package using pnpm. This is often used for displaying user notifications in React applications.

```bash
pnpm add react-toastify
```

--------------------------------

### Banner Component - Default Example

Source: https://radianos.com/docs/components/banner

A basic example of the Banner component with a title and description. This shows the default rendering of the banner.

```tsx
<Banner>
  #### Banner Title Here
  Enter your banner message here
  Button Label
</Banner>
```

--------------------------------

### Install Input OTP Component with PNPM

Source: https://radianos.com/docs/components/input-otp

This snippet demonstrates how to install the Input OTP component using the PNPM package manager. It utilizes the dlx command to add the component to your project.

```bash
pnpm dlx @radianos/radianbeta add input-otp
```

--------------------------------

### Install Radianos Pointer using pnpm

Source: https://radianos.com/docs/animations/pointer

This snippet shows how to install the Radianos pointer component using the pnpm package manager. It utilizes the dlx command for direct execution of the package.

```bash
pnpm dlx @radianos/radianbeta add pointer
```

--------------------------------

### Install Radianos Checkbox Component

Source: https://radianos.com/docs/components/checkbox

Installs the Radianos checkbox component using pnpm. This command downloads and adds the necessary package to your project, making the checkbox component available for use.

```bash
pnpm dlx @radianos/radianbeta add checkbox
```

--------------------------------

### Install Radianos Hover Card using pnpm

Source: https://radianos.com/docs/components/hover-card

This snippet shows the command to install the Radianos hover-card package using pnpm. It's a one-line command executed in the CLI.

```bash
pnpm dlx @radianos/radianbeta add hover-card
```

--------------------------------

### Install Radianos UI Button

Source: https://radianos.com/docs/components/button

Install the Radianos UI button component using pnpm. This command adds the button package to your project, making it available for use.

```bash
pnpm dlx @radianos/radianbeta add button
```

--------------------------------

### Add Components to Radianos Project with CLI

Source: https://radianos.com/docs/getting-started/cli

Adds specified components and their dependencies to an existing Radianos project. This command automates the installation process and file creation for new components.

```shell
pnpm dlx @radianos/radianbeta add [component]
```

--------------------------------

### Install Radianos Pagination (pnpm)

Source: https://radianos.com/docs/components/pagination

Installs the Radianos pagination component using the pnpm package manager. This command adds the necessary package to your project for using the pagination UI.

```bash
pnpm dlx @radianos/radianbeta add pagination
```

--------------------------------

### Create components.json for Radianos Project

Source: https://radianos.com/docs/installation/manual

This snippet shows the structure of the components.json file, which is placed in the root of your Radianos project. It defines the schema, aliasing for directories like components, utils, and hooks, and indicates whether the project uses a src directory.

```json
{
  "$schema": "https://radianos.com/schema.json",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "animated": "@/components/animated",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "hasSrcDir": true
}
```

--------------------------------

### Radianos Badge Component Examples

Source: https://radianos.com/docs/components/badge

Illustrative code snippets showcasing different configurations and appearances of the Radianos Badge component, including close icons, dots, and avatars.

```html
<Badge variant="outline" size="24" color="primary">Close Icon</Badge>
<Badge size="20" color="info">Dot</Badge>
<Badge size="28" color="success" closable={true}>Avatar</Badge>
```

--------------------------------

### Install Radianos Table Component using pnpm

Source: https://radianos.com/docs/components/table

Installs the Radianos Table component using the pnpm package manager. This command is typically run in the root of your project to add the necessary package.

```bash
pnpm dlx @radianos/radianbeta add table
```

--------------------------------

### Basic Usage of Password Component in React

Source: https://radianos.com/docs/components/password

Shows a basic example of how to render the Password component in a React application. The `placeholder` prop is used to provide a hint to the user.

```typescript
<Password placeholder="Type your password" />

```

--------------------------------

### Install Typing Text Component (pnpm)

Source: https://radianos.com/docs/animations/typing-text

This snippet shows how to install the Typing Text component using the pnpm package manager. It utilizes 'dlx' to execute the package directly.

```bash
pnpm dlx @radianos/radianbeta add typing-text
```

--------------------------------

### Install Text Reveal Component (pnpm)

Source: https://radianos.com/docs/animations/text-reveal

Installs the Text Reveal component using the pnpm package manager. This command fetches and adds the necessary package to your project, enabling the text reveal animation.

```bash
pnpm dlx @radianos/radianbeta add text-reveal
```

--------------------------------

### Basic Radianos Modal Usage Example

Source: https://radianos.com/docs/components/modal

React JSX code demonstrating a basic implementation of the Radianos Modal component. This example shows how to trigger the modal using a button and includes header, body, and footer sections for content.

```jsx
<Modal>

	<ModalTrigger asChild>
	  <button className="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>
	</ModalTrigger>

	<ModalContent>
	  <ModalHeader>
		<ModalTitle>My Modal</ModalTitle>
		<ModalClose />
	  </ModalHeader>

	  <ModalBody>
		<p>This is a simple modal body content.</p>
	  </ModalBody>

	  <ModalFooter>
		<button className="px-3 py-1 bg-gray-200 rounded">Cancel</button>
		<button className="px-3 py-1 bg-blue-500 text-white rounded">Confirm</button>
	  </ModalFooter>
	</ModalContent>

</Modal>
```

--------------------------------

### Install File Upload Component with pnpm

Source: https://radianos.com/docs/components/file-upload

Installs the File Upload component using the pnpm package manager. This command adds the necessary dependencies for the file upload functionality.

```bash
pnpm dlx @radianos/radianbeta add file-upload
```

--------------------------------

### Install Infinite Scroll with pnpm

Source: https://radianos.com/docs/animations/infinite-scroll

Installs the infinite-scroll package using the pnpm package manager. This command should be run in your project's root directory.

```bash
pnpm dlx @radianos/radianbeta add infinite-scroll
```

--------------------------------

### Install Radian Accordion with pnpm

Source: https://radianos.com/docs/components

Installs the Radian Accordion component using the pnpm package manager. This command downloads and adds the necessary package to your project dependencies.

```bash
pnpm dlx @radianos/radianbeta add accordion
```

--------------------------------

### Button Component Examples (TypeScript/React)

Source: https://context7.com/context7/radianos/llms.txt

Demonstrates various ways to use the Button component, including different variants, sizes, states, icons, and groups. It also shows how to create link buttons and social login buttons. The component accepts props for styling, interactivity, and content.

```tsx
// Installation
// pnpm dlx @radianos/radianbeta add button

import { Button, ButtonGroup, CompactButton } from "@/components/ui/button"

// Basic button usage
<Button>Click Me</Button>

// Button with variants and sizes
<Button variant="strong" color="primary" size={36}>
  Strong Button
</Button>

<Button variant="soft" color="info" size={40}>
  Soft Info
</Button>

<Button variant="outline" color="success" size={32}>
  Success Outline
</Button>

<Button variant="ghost" color="error" size={28}>
  Ghost Error
</Button>

// Button with loading state
<Button loading disabled>
  Loading...
</Button>

// Button with icons
<Button
  lead={<Icon name="plus" />}
  trail={<Icon name="arrow-right" />}
>
  Add Item
</Button>

// Icon-only button
<Button iconOnly>
  <Icon name="search" />
</Button>

// Button group
<ButtonGroup variant="outline" color="primary" size={36}>
  <Button>Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</ButtonGroup>

// Compact button
<CompactButton variant="soft" color="neutral" size={28}>
  Small
</CompactButton>

// Link button (renders as anchor)
<Button asChild>
  <a href="/dashboard">Go to Dashboard</a>
</Button>

// Social login button example
<Button
  variant="outline"
  size={40}
  lead={<GoogleIcon />}
>
  Continue with Google
</Button>

// Props:
// - variant: "strong" | "soft" | "outline" | "ghost" (default: "strong")
// - color: "primary" | "info" | "success" | "warning" | "error" | "neutral" (default: "primary")
// - size: 28 | 32 | 36 | 40 | 44 | 48 (default: 36)
// - disabled: boolean (default: false)
// - loading: boolean (default: false)
// - lead: ReactNode
// - trail: ReactNode
// - asChild: boolean (default: false)
// - iconOnly: boolean (default: false)

```

--------------------------------

### Radianos CLI init Command Options

Source: https://radianos.com/docs/getting-started/cli

Displays help information for the `radianos init` command, detailing its usage, arguments for components, and available options such as skipping confirmation prompts.

```shell
Usage: radianos init [options] [components...]

initialize your project and install dependencies

Arguments:
  components        the components to add or a url to the component.

Options:
  -y, --yes         skip confirmation prompt. (default: false)
  -h, --help        display help for command
```

--------------------------------

### Install Radianos Radio Group Component

Source: https://radianos.com/docs/components/radio-group

Instructions for installing the Radio Group component from Radianos UI using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx @radianos/radianbeta add radiogroup
```

--------------------------------

### Install Code Area Package - pnpm

Source: https://radianos.com/docs/components/code-area

Installs the code-area package using pnpm. This command is used to add the necessary dependencies for the code area functionality.

```bash
pnpm dlx @radianos/radianbeta add code-area
```

--------------------------------

### Apply Base Styles and Border Color

Source: https://radianos.com/docs/installation/manual

Applies a base border color to all elements and sets the font and background for the body. This section ensures consistent visual defaults across the page.

```css
@layer base {
  * {
    border-color: var(--color-border);
  }
  body {
    @apply font-body bg-bg text-fg;
  }
}

```

--------------------------------

### Install Radianos Date Picker (CLI)

Source: https://radianos.com/docs/components/date-picker

Command to install the Radianos Date Picker using pnpm. This command utilizes pnpm dlx to execute the package's add command.

```bash
pnpm dlx @radianos/radianbeta add date-picker
```

--------------------------------

### Basic Radianos Drawer Usage (TypeScript)

Source: https://radianos.com/docs/components/drawer

An example of implementing a basic Radianos Drawer component. This snippet shows how to integrate the DrawerTrigger and DrawerContent, controlling its visibility and appearance.

```typescript
<Drawer handle={false} backdrop='overlay'>
	<DrawerTrigger><Button>Open Trigger</Button></DrawerTrigger>
	<DrawerContent>
		<Button variant="outline" color="neutral" >Close Drawer</Button>
	</DrawerContent>
</Drawer>
```

--------------------------------

### Icon Counter Tabs Example

Source: https://radianos.com/docs/components/tabs

An example showcasing Tabs with a counter displayed on each tab trigger. This is useful for indicating the number of items associated with each section, such as tasks in different statuses.

```jsx
Completed
8
In Progress
4
Archived
10
You have completed 8 tasks.
```

--------------------------------

### Install Radianos Calendar Component

Source: https://radianos.com/docs/components/calendar

This command installs the Radianos Calendar component using pnpm. It ensures the necessary packages like React DayPicker, @internationalized/date, and date-fns are available for the calendar functionality.

```bash
pnpm dlx @radianos/radianbeta add calendar
```

--------------------------------

### Install Radianos Slider Component (pnpm)

Source: https://radianos.com/docs/components/slider

Installs the Radianos Slider component using the pnpm package manager. This command ensures the latest version of the slider is added to your project.

```bash
pnpm dlx @radianos/radianbeta add slider
```

--------------------------------

### Use Radianos Switch Component

Source: https://radianos.com/docs/components/switch

Shows a basic example of how to render the Radianos Switch component in your application. The component can accept a 'size' prop to control its dimensions.

```jsx
<Switch size="24">
      Enable notifications
    </Switch>

```

--------------------------------

### Alert Component Code Example

Source: https://radianos.com/docs/components/alert

A basic code structure for using the Alert component.

```typescript
import Alert from "/components/ui/alert.tsx";

function MyComponent() {
  return (
    <Alert
      color="primary"
      variant="outline"
      title="Important Notification"
      message="This is a primary notification with important information."
      closable={true}
    />
  );
}
```

--------------------------------

### Install Divider Component using pnpm

Source: https://radianos.com/docs/components/divider

Installs the Divider component using the pnpm package manager. This command adds the necessary package to your project's dependencies.

```bash
pnpm dlx @radianos/radianbeta add divider
```
Tokens:
Raw