<div class="flex-1">
<div class="container relative">
<section class="flex max-w-[980px] flex-col items-start gap-2 pt-8 md:pt-12 pb-8">
<a
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
href="/docs">🎉
<div
data-orientation="vertical"
role="none"
class="shrink-0 bg-border w-[1px] mx-2 h-4"></div>
<span class="sm:hidden">Introducing shadcn/ui on Rails!</span>
<span class="hidden sm:inline">Introducing shadcn/ui on Rails!</span>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="ml-1 h-4 w-4">
<path
d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"></path>
</svg>
</a>
<h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]">
Build your component library.
</h1>
<span
class="max-w-[750px] text-lg text-muted-foreground sm:text-xl"
data-br=":R1ir9hja:"
data-brr="1"
style="
display: inline-block;
vertical-align: top;
text-decoration: inherit;
max-width: 586px;
">
Beautifully designed components based on <a href="https://ui.shadcn.com">shadcn/ui</a> that
you can copy and paste into your apps. Accessible. Customizable. Open Source.
</span>
<div class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
<a
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"
href="/docs">Get Started
</a>
<a
target="_blank"
rel="noreferrer"
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
href="https://github.com/aviflombaum/shadcn-rails">
<svg
viewBox="0 0 438.549 438.549"
class="mr-2 h-4 w-4">
<path
fill="currentColor"
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>GitHub
</a>
</div>
</section>
<section class="pt-8 md:pt-12 pb-8">
<div className="overflow-hidden rounded-[0.5rem] border border-1 bg-background shadow">
<div
class="flex-1 space-y-4 p-8 pt-6 rounded-[0.5rem] border border-1 bg-background shadow">
<div class="flex items-center justify-between space-y-2">
<h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
</div>
<div
dir="ltr"
data-orientation="horizontal"
class="space-y-4">
<div
role="tablist"
aria-orientation="horizontal"
class="hidden md:inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
tabindex="0"
data-orientation="horizontal"
style="outline: none">
<button
type="button"
role="tab"
aria-selected="true"
aria-controls="radix-:r8:-content-overview"
data-state="active"
id="radix-:r8:-trigger-overview"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
tabindex="-1"
data-orientation="horizontal"
data-radix-collection-item="">
Overview</button><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:r8:-content-analytics"
data-state="inactive"
data-disabled=""
disabled=""
id="radix-:r8:-trigger-analytics"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
tabindex="-1"
data-orientation="horizontal"
data-radix-collection-item="">
Analytics</button><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:r8:-content-reports"
data-state="inactive"
data-disabled=""
disabled=""
id="radix-:r8:-trigger-reports"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
tabindex="-1"
data-orientation="horizontal"
data-radix-collection-item="">
Reports</button><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:r8:-content-notifications"
data-state="inactive"
data-disabled=""
disabled=""
id="radix-:r8:-trigger-notifications"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
tabindex="-1"
data-orientation="horizontal"
data-radix-collection-item="">
Notifications
</button>
</div>
<div
data-state="active"
data-orientation="horizontal"
role="tabpanel"
aria-labelledby="radix-:r8:-trigger-overview"
id="radix-:r8:-content-overview"
tabindex="0"
class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 space-y-4"
style="">
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
<h3 class="tracking-tight text-sm font-medium">Total Revenue</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="h-4 w-4 text-muted-foreground">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
<div class="p-6 pt-0">
<div class="text-2xl font-bold">$45,231.89</div>
<p class="text-xs text-muted-foreground">+20.1% from last month</p>
</div>
</div>
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
<h3 class="tracking-tight text-sm font-medium">Subscriptions</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="h-4 w-4 text-muted-foreground">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle
cx="9"
cy="7"
r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="p-6 pt-0">
<div class="text-2xl font-bold">+2350</div>
<p class="text-xs text-muted-foreground">+180.1% from last month</p>
</div>
</div>
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
<h3 class="tracking-tight text-sm font-medium">Sales</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="h-4 w-4 text-muted-foreground">
<rect
width="20"
height="14"
x="2"
y="5"
rx="2"></rect>
<path d="M2 10h20"></path>
</svg>
</div>
<div class="p-6 pt-0">
<div class="text-2xl font-bold">+12,234</div>
<p class="text-xs text-muted-foreground">+19% from last month</p>
</div>
</div>
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
<h3 class="tracking-tight text-sm font-medium">Active Now</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="h-4 w-4 text-muted-foreground">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="p-6 pt-0">
<div class="text-2xl font-bold">+573</div>
<p class="text-xs text-muted-foreground">+201 since last hour</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section
class="items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3 border mb-4">
<div class="col-span-2 grid items-start gap-6 lg:col-span-1">
<div class="flex items-center justify-center [&>div]:w-full">
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="flex flex-col p-6 space-y-1">
<h3 class="font-semibold tracking-tight text-2xl">Create an account</h3>
<p class="text-sm text-muted-foreground">
Enter your email below to create your account
</p>
</div>
<div class="p-6 pt-0 grid gap-4">
<div class="grid grid-cols-2 gap-6">
<button
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2">
<svg
viewBox="0 0 438.549 438.549"
class="mr-2 h-4 w-4">
<path
fill="currentColor"
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>Github</button><button
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2">
<svg
role="img"
viewBox="0 0 24 24"
class="mr-2 h-4 w-4">
<path
fill="currentColor"
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>Google
</button>
</div>
<div class="relative">
<div class="absolute inset-0 flex items-center">
<span class="w-full border-t"></span>
</div>
<div class="relative flex justify-center text-xs uppercase">
<span class="bg-background px-2 text-muted-foreground">Or continue with</span>
</div>
</div>
<div class="grid gap-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="email">Email</label><input
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
id="email"
placeholder="m@example.com"
type="email">
</div>
<div class="grid gap-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password">Password</label><input
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
id="password"
type="password">
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2 w-full">
Create account
</button>
</div>
</div>
</div>
<div class="flex items-center justify-center [&>div]:w-full">
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="font-semibold leading-none tracking-tight">Payment Method</h3>
<p class="text-sm text-muted-foreground">Add a new payment method to your account.</p>
</div>
<div class="p-6 pt-0 grid gap-6">
<div
role="radiogroup"
aria-required="false"
dir="ltr"
class="grid grid-cols-3 gap-4"
tabindex="0"
style="outline: none">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
for="card"><button
type="button"
role="radio"
aria-checked="true"
data-state="checked"
value="card"
class="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sr-only"
id="card"
tabindex="-1"
data-radix-collection-item="">
<span
data-state="checked"
class="flex items-center justify-center"><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 fill-primary">
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"></path></svg></span></button><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="mb-3 h-6 w-6">
<rect
width="20"
height="14"
x="2"
y="5"
rx="2"></rect>
<path d="M2 10h20"></path></svg>Card</label><label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
for="paypal"><button
type="button"
role="radio"
aria-checked="false"
data-state="unchecked"
value="paypal"
class="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sr-only"
id="paypal"
tabindex="-1"
data-radix-collection-item=""></button><svg
role="img"
viewBox="0 0 24 24"
class="mb-3 h-6 w-6">
<path
d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
fill="currentColor"></path></svg>Paypal</label><label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
for="apple"><button
type="button"
role="radio"
aria-checked="false"
data-state="unchecked"
value="apple"
class="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sr-only"
id="apple"
tabindex="-1"
data-radix-collection-item=""></button><svg
role="img"
viewBox="0 0 24 24"
class="mb-3 h-6 w-6">
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
fill="currentColor"></path></svg>Apple</label>
</div>
<div class="grid gap-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="name">Name</label><input
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
id="name"
placeholder="First Last">
</div>
<div class="grid gap-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="number">Card number</label><input
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
id="number"
placeholder="">
</div>
<div class="grid grid-cols-3 gap-4">
<div class="grid gap-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="month">Expires</label><button
type="button"
role="combobox"
aria-controls="radix-:r6f:"
aria-expanded="false"
aria-autocomplete="none"
dir="ltr"
data-state="closed"
data-placeholder=""
class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
id="month">
<span style="pointer-events: none">Month</span><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 opacity-50"
aria-hidden="true">
<path
d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="grid gap-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="year">Year</label><button
type="button"
role="combobox"
aria-controls="radix-:r6g:"
aria-expanded="false"
aria-autocomplete="none"
dir="ltr"
data-state="closed"
data-placeholder=""
class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
id="year">
<span style="pointer-events: none">Year</span><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 opacity-50"
aria-hidden="true">
<path
d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="grid gap-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="cvc">CVC</label><input
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
id="cvc"
placeholder="CVC">
</div>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2 w-full">
Continue
</button>
</div>
</div>
</div>
</div>
<div class="col-span-2 grid items-start gap-6 lg:col-span-1 mt-8 lg:mt-0">
<div class="flex items-center justify-center [&>div]:w-full">
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="flex flex-col space-y-1.5 p-6 pb-3">
<h3 class="font-semibold leading-none tracking-tight">Notifications</h3>
<p class="text-sm text-muted-foreground">
Choose what you want to be notified about.
</p>
</div>
<div class="p-6 pt-0 grid gap-1">
<div
class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mt-px h-5 w-5">
<path
d="M8.60124 1.25086C8.60124 1.75459 8.26278 2.17927 7.80087 2.30989C10.1459 2.4647 12 4.41582 12 6.79999V10.25C12 11.0563 12.0329 11.7074 12.7236 12.0528C12.931 12.1565 13.0399 12.3892 12.9866 12.6149C12.9333 12.8406 12.7319 13 12.5 13H8.16144C8.36904 13.1832 8.49997 13.4513 8.49997 13.75C8.49997 14.3023 8.05226 14.75 7.49997 14.75C6.94769 14.75 6.49997 14.3023 6.49997 13.75C6.49997 13.4513 6.63091 13.1832 6.83851 13H2.49999C2.2681 13 2.06664 12.8406 2.01336 12.6149C1.96009 12.3892 2.06897 12.1565 2.27638 12.0528C2.96708 11.7074 2.99999 11.0563 2.99999 10.25V6.79999C2.99999 4.41537 4.85481 2.46396 7.20042 2.3098C6.73867 2.17908 6.40036 1.75448 6.40036 1.25086C6.40036 0.643104 6.89304 0.150421 7.5008 0.150421C8.10855 0.150421 8.60124 0.643104 8.60124 1.25086ZM7.49999 3.29999C5.56699 3.29999 3.99999 4.86699 3.99999 6.79999V10.25L4.00002 10.3009C4.0005 10.7463 4.00121 11.4084 3.69929 12H11.3007C10.9988 11.4084 10.9995 10.7463 11 10.3009L11 10.25V6.79999C11 4.86699 9.43299 3.29999 7.49999 3.29999Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"></path>
</svg>
<div class="space-y-1">
<p class="text-sm font-medium leading-none">Everything</p>
<p class="text-sm text-muted-foreground">
Email digest, mentions & all activity.
</p>
</div>
</div>
<div
class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mt-px h-5 w-5">
<path
d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"></path>
</svg>
<div class="space-y-1">
<p class="text-sm font-medium leading-none">Available</p>
<p class="text-sm text-muted-foreground">Only mentions and comments.</p>
</div>
</div>
<div
class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mt-px h-5 w-5">
<path
d="M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"></path>
</svg>
<div class="space-y-1">
<p class="text-sm font-medium leading-none">Ignoring</p>
<p class="text-sm text-muted-foreground">Turn off all notifications.</p>
</div>
</div>
</div>
</div>
</div>
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="flex min-h-[350px] w-full justify-center p-10 items-center flex-col gap-y-8">
<div class="w-full">
<div
class="w-full"
data-orientation="vertical">
<div
data-orientation="vertical"
class="border-b st-accordion"
data-controller="ui--accordion">
<h3
data-orientation="vertical"
class="flex">
<a
href="content-1"
data-action="ui--accordion#toggle"
aria-expanded="true"
data-orientation="vertical"
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
data-state="closed">
Did you know?<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4 shrink-0 transition-transform duration-200">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</a>
</h3>
<div
data-accordion-id="content-1"
role="region"
data-orientation="vertical"
class="st-accordion__content overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
<div class="pb-4 pt-0">
You can wrap shadcn helpers in any component library you want!
</div>
</div>
</div>
</div>
<div
class="w-full"
data-orientation="vertical">
<div
data-orientation="vertical"
class="border-b st-accordion"
data-controller="ui--accordion">
<h3
data-orientation="vertical"
class="flex">
<a
href="content-1"
data-action="ui--accordion#toggle"
aria-expanded="true"
data-orientation="vertical"
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
data-state="closed">
Use the generators.<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4 shrink-0 transition-transform duration-200">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</a>
</h3>
<div
data-accordion-id="content-1"
role="region"
data-orientation="vertical"
class="st-accordion__content overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
<div class="pb-4 pt-0">
Add components with
<code
class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold">rails g shadcn_ui add accordion</code>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-center [&>div]:w-full">
<div class="rounded-xl border bg-card text-card-foreground shadow">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="font-semibold leading-none tracking-tight">Cookie Settings</h3>
<p class="text-sm text-muted-foreground">Manage your cookie settings here.</p>
</div>
<div class="p-6 pt-0 grid gap-6">
<div class="flex items-center justify-between space-x-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col space-y-1"
for="necessary"><span>Strictly Necessary</span><span class="font-normal leading-snug text-muted-foreground">These cookies are essential in order to use the website and use its
features.</span></label><button
type="button"
role="switch"
aria-checked="true"
data-state="checked"
value="on"
class="peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
id="necessary">
<span
data-state="checked"
class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
</button>
</div>
<div class="flex items-center justify-between space-x-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col space-y-1"
for="functional"><span>Functional Cookies</span><span class="font-normal leading-snug text-muted-foreground">These cookies allow the website to provide personalized functionality.</span></label><button
type="button"
role="switch"
aria-checked="false"
data-state="unchecked"
value="on"
class="peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
id="functional">
<span
data-state="unchecked"
class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
</button>
</div>
<div class="flex items-center justify-between space-x-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col space-y-1"
for="performance"><span>Performance Cookies</span><span class="font-normal leading-snug text-muted-foreground">These cookies help to improve the performance of the website.</span></label><button
type="button"
role="switch"
aria-checked="false"
data-state="unchecked"
value="on"
class="peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
id="performance">
<span
data-state="unchecked"
class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
</button>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-full">
Save preferences
</button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>