Park UI

Usage

Name

import { Stack } from 'styled-system/jsx'
import { Button } from '~/components/ui/button'
import * as Card from '~/components/ui/card'
import { FormLabel } from '~/components/ui/form-label'
import { Input } from '~/components/ui/input'

export const Demo = (props: Card.RootProps) => {
  return (
    <Card.Root width="sm" {...props}>
      <Card.Header>
        <Card.Title>Team Members</Card.Title>
        <Card.Description>Add new members to your organisation.</Card.Description>
      </Card.Header>
      <Card.Body>
        <Stack gap="4">
          <Stack gap="1.5">
            <FormLabel htmlFor="name">Name</FormLabel>
            <Input id="name" placeholder="Name" />
          </Stack>
          <Stack gap="1.5">
            <FormLabel htmlFor="email">Email</FormLabel>
            <Input id="email" type="email" placeholder="Email" />
          </Stack>
        </Stack>
      </Card.Body>
      <Card.Footer gap="3">
        <Button variant="outline">Cancel</Button>
        <Button>Invite</Button>
      </Card.Footer>
    </Card.Root>
  )
}

Installation

Insert code snippet into your project. Update import paths as needed.

import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'card',
    slots: {
      root: 'card__root',
      header: 'card__header',
      body: 'card__body',
      footer: 'card__footer',
      title: 'card__title',
      description: 'card__description',
    },
    variants: {},
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(ark.div, 'root')
export const Body = withContext(ark.div, 'body')
export const Description = withContext(ark.div, 'description')
export const Footer = withContext(ark.div, 'footer')
export const Header = withContext(ark.div, 'header')
export const Title = withContext(ark.h3, 'title')

export type RootProps = ComponentProps<typeof Root>
export interface BodyProps extends ComponentProps<typeof Body> {}
export interface DescriptionProps extends ComponentProps<typeof Description> {}
export interface FooterProps extends ComponentProps<typeof Footer> {}
export interface HeaderProps extends ComponentProps<typeof Header> {}
export interface TitleProps extends ComponentProps<typeof Title> {}

import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'card',
    slots: {
      root: 'card__root',
      header: 'card__header',
      body: 'card__body',
      footer: 'card__footer',
      title: 'card__title',
      description: 'card__description',
    },
    variants: {},
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(ark.div, 'root')
export const Body = withContext(ark.div, 'body')
export const Description = withContext(ark.div, 'description')
export const Footer = withContext(ark.div, 'footer')
export const Header = withContext(ark.div, 'header')
export const Title = withContext(ark.h3, 'title')

export type RootProps = ComponentProps<typeof Root>
export interface BodyProps extends ComponentProps<typeof Body> {}
export interface DescriptionProps extends ComponentProps<typeof Description> {}
export interface FooterProps extends ComponentProps<typeof Footer> {}
export interface HeaderProps extends ComponentProps<typeof Header> {}
export interface TitleProps extends ComponentProps<typeof Title> {}

Not yet available